📢 CORS 동작 방식

1. 프리플라이트 요청

• 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것

  프리플라이트 요청이 필요한 이유

  • 실제 요청을 보내기 전에 미리 권한 확인을 할 수 있기 때문에, 실제 요청을 처음부터 통째로 보내는 것보다 효율적이다.
  • CORS에 대비가 되어있지 않은 서버를 보호할 수 있습니다.

2. 단순 요청

• 특정 조건이 만족 되면 프리플라이트 요청을 생략하고 요청을 보내는 것을 말합니다.

  단순 요청 조건

  • GET, HEAD, POST 요청 중 하나는 존재
  • Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동을 설정할 수 있다.

3. 인증 정보를 포함한 요청

• 요청 헤더에 인증 정보를 담아 보내는 요청

  CORS 설정

  • 프론트 측 : 요청 헤더 withCredentials : true
  • 서버 측 : 응답 헤더 : Access-Control-Allow-Credentials : true
  • 서버 측에서 Access-Control-Allow-Origin을 설정 할 때, 모든 출처를 허용한다는 뜻의 (*)로 설정하면 에러가 발생, 출처 정확하게 표기

---

📢 HTTP 트랜잭션 해부

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/

서버 생성

• 모든 node 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다. createServer 이용

const http = require('http');

const server = http.createServer((request, response) => {
// 작업 실행
});

요청 바디

• POST나 PUT 요청을 받을 때 애플리케이션에 요청 바디는 중요하다.
• 핸들러에 전달된 request 객체는 ReadableStream 인터페이스를 구현하고 있다.
• 스트림의 ‘data’와 ‘end’ 이벤트에 이벤트 리스너를 등록해서 데이터를 받을 수 있다.
• 각 ‘data’ 이벤트에서 발생시킨 청크는 Buffer이다.

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
});

HTTP 상태코드

• 따로 설정하지 않으면 응답의 HTTP 상태 코드는 항상 200이다.

response.statusCode = 404; // 클라이언트에게 리소스를 찾을 수 없다고 알려줍니다.

---

과제 - Mini Node Server 🔗

basic-server.js

const server = http.createServer((request, response) => {
  // CORS 관련 헤더를 OPTIONS 응답에 적용해야 합니다.
  if (request.method === 'OPTIONS') { 
    response.writeHead(200, defaultCorsHeader);
    response.end();
    return;
  }

  let body = [];
  if(request.method === 'POST' && request.url === '/lower') { 
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString().toLowerCase();
      response.writeHead(200, defaultCorsHeader);
      response.end(body);
      return;
    });
  }
  if(request.method === 'POST' && request.url === '/upper') {
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString().toUpperCase();
      response.writeHead(200, defaultCorsHeader);
      response.end(body);
      return;
    });
  } 
  else {
    response.statusCode = 404;
    response.end();
  }
}).listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

// CORS 관련 헤더를 OPTIONS 응답에 적용해야 합니다.
  if (request.method === 'OPTIONS') { 
    response.writeHead(200, defaultCorsHeader);
    response.end();
    return;
  }

let body = [];
  if(request.method === 'POST' && request.url === '/lower') { 
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString().toLowerCase();
      response.writeHead(200, defaultCorsHeader);
      response.end(body);
      return;
    });
  }

if(request.method === 'POST' && request.url === '/upper') {
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString().toUpperCase();
      response.writeHead(200, defaultCorsHeader);
      response.end(body);
      return;
    });
} else {  // else에서 statusCode 에러표시
    response.statusCode = 404;
    response.end();
} 

• 요청 메서드 POST , URL = /upper
• 위 조건이 아닌 경우 404 응답

response.writeHead(200, defaultCorsHeader);

• 이전 요청에 대한 내용을 기억하지 못 하기 때문에 매번 요청해주어야 한다.