공식 문서를 참고.

Node.js를 사용하여 웹 서버를 생성하고, 들어오는 요청을 처리하면서 CORS(Cross-Origin Resource Sharing) 정책을 적용시키기.

create web server

const http = require('http');

const server = http.createServer((request, response) => {
  // 코드 작성 구역
});

const server = http.createServer();
server.on('request', (request, response) => {
});

const { headers, method, url } = request;

const http = require('http');

const server = http.createServer((request, response) => {
// 모든 도메인
  response.setHeader("Access-Control-Allow-Origin", "*");

// 특정 도메인
  response.setHeader("Access-Control-Allow-Origin", "https://codestates.com");

// 인증 정보를 포함한 요청을 받을 경우
  response.setHeader("Access-Control-Allow-Credentials", "true");
})

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
};

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

Bare minimum requirements

const http = require('http');
const PORT = 제공된 포트 번호
const ip = 'localhost';

...

생략...).listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const server = http.createServer((request, response) => {
...
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;
  });
  }

else 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.writeHead(200, defaultCorsHeader);
  response.end();
  return;
}

if (request.method === 'OPTIONS') {
    response.writeHead(200, defaultCorsHeader);
    response.end();
    return;
  }

1. request의 on은 이벤트 리스너야?

맞다. data 이벤트와 end 이벤트에 대한 리스너를 등록하는 메서드다. 본문의 코드에서 data 이벤트는 요청의 데이터를 청크(chunk) 단위로 받을 때마다 호출되고, end 이벤트는 요청의 데이터를 모두 받았을 때 호출되는 것. 참고로 이 메서드는 본문 초반에 설명한 eventEmitter 클래스 출신이고, request.on('data', callback) 처럼 사용해서 data 이벤트가 발생했을 때 특정 콜백 함수를 실행하도록 설정해 준다.

2. body push chunk 부분도 애매한데… chunk라는 인자 대신 아무거나 넣어도 동작하는 건가?

body.push(chunk) 의 경우 받아온 데이터 청크를body 배열에 추가하는 부분인 건데, 여기서 인자로 정한 chunk는 요청의 데이터 청크임. 시맨틱하게 적은 것뿐이지 이름은 중요하지 않고 그냥 poop으로 해도 동작함.

3. response.writeHead(200, defaultCorsHeader)에서 writeHead의 역할이 정확히 뭐지? 얘가 인자로 뭘 받는지는 알겠는데 동작 원리가 궁금… 200 OK를 응답으로 보내면서 하단에 작성된 defaultCorsHeader 헤더를 클라이언트에 보내는 건가?

응답의 헤더를 설정하는 메서드가 맞다. 첫 번째 인자는 응답의 상태 코드를 적고, 두 번째 인자로는 응답에 포함될 헤더 정보를 담아 주면 된다. 여기서는 defaultCorsHeader 라는 객체가 그 역할을 맡은 거다. 이번 코드에서는 CORS 관련 설정을 포함해야 하고, 포함했고, 요청에 대한 CORS 처리를 수행하기 위해 사용됐다.

4. defaultCorsHeader 변수 내부에서 정의된 키에 대한 개념이 명확히 안 잡힌 듯…

클라이언트가 서버로 요청을 보낼 때 이 헤더들이 응답에 포함되면, 브라우저는 해당 요청이 CORS 정책을 준수하는지 확인하고 허용 여부를 결정한다.
고로 이러한 헤더를 응답에 넣어야 클라이언트에서 SOP 위반 없이 서버에 접근 가능함.

---

사족 엄청 많이 달았었는데 뭔 스팸 단어가 있었는지 자꾸 비공개로 등록돼서 울며 겨자먹기로 다 지웠습니다. 눈물이 찔끔 난다