CORS란?

오늘은 CORS에 대해서 공부했다. 

CORS는 Cross Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유라고 해석할 수 있으며 cross origin에서 리소스(서버 자원)를 요청하여 사용하는 것이다. 

말이 조금 어렵지만.. 서로 다른 출처에서 서버에 자원을 요청하는 것이라고 해석하면 될 것 같다.

브라우저에서 크로스 도메인 요청은 기본적으로 제한되어있기 때문에 이것을 허용하기 위해서는 서버가 허용하는 범위 내애서 cross origin 요청을 허용해야 한다.

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

위의 코드를 통해 요청한 cross origin 요청을 해석해보면 

• 모든 도메인(*)을 허용한다.
• 메서드는 GET, POST, PUT, DELETE, OPTIONS만 허용한다.
• 헤더에는 content-type과 accept만 쓸 수 있다.
• preflight request는 10초까지 허용된다.

이렇게 해석이 된다. 이제 defaultCorsHeader 객체를 헤더에 넣어주면 된다.

const server = http.createServer((request, response) => {

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

  if (request.method === "POST") {
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      response.writeHead(200, defaultCorsHeader);
      body = Buffer.concat(body).toString();
      response.end(body);
    }); 
  } else {
    response.statusCode = 400;
    response.end();
  }
  
  });

 

method가 OPTIONS일 때는 서버에서 Allow 하는 조건들을 다 맞추고 있는지 사전에 서버에 확인하는 요청이기 때문에 먼저 처리해주고 POST 요청을 받게 된다. 이러한 요청을 Preflight 요청이라고 한다.

CORS 프리 플라이트 요청은 CORS 프로토콜이 이해되고 서버가 특정 메서드와 헤더를 사용하여 인식하는지 확인하는CORS 요청이다. 프리 플라이트 요청은 브라우저에 의해 자동으로 발행되며 일반적인 경우 프런트 엔드 개발자는 이러한 요청을 직접 작성할 필요가 없다.