Cross-Origin Resource Sharing(CORS)

Browser는 보안상의 이유로 웹과 웹서버의 도메인이 다른경우 HTTP요청을 제한한다.

XMLHttpRequeset or Fetch API등을 사용할때, 다른 출처(도메인)의 리소스를 받아오기위해서는 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

Simple Requests

Simple Reuests는 출처(호스트)가 달라도 응답 오케이

조건
1. Http Method : GET, HEAD, POST 중 하나
2. 기본타입 해더만 가능(자동으로 세팅되는 해더)
3. content-type 헤더가 허용하는 값은 다음 3가지 (application/json 불가)

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

preflight Requests

조건
1. Simple Requesets가 아닌 경우

Main request가 가기전 Prefligth requeset로 OPTIONS라는 method를 통해 Main request의 method는 뭐고 header의 내용이 뭐다라고 알려주며 요청시, 응답이 가능한지 미리 한번 확인하는 요청이 가는데 이를 preflight request라고 한다. 가능할 경우 Main request가 가고 거부당하면 요청이 가지 않는다.

Credentialed Requests

cors설정에서

credentials:true

Siple Requests일 경우를 포함한 모든 요청에

withCredential:true

가 있어야한다.

node.js 기반에서 cors 설정

import 'reflect-metadata';
import express from 'express'; //express 사용의 경우
import cors from 'cors'; // npm i cors

const app = express();
export const server = http.createServer(app);
const port = 5050

//app.use(cors(corsOption))
//예
app.use(cors({
    origin: 'http://localhost:3000', //허용하는 도메인
    credentials: true, // 쿠키가 있어야한다.
    methods: ['GET', 'POST', 'OPTION', 'PATCH', 'DELETE'], // 허용하는 Http method
  }))

...

server.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});