TIL 211127 | CORS

CORS

Cross-origin resource sharing의 약자이며 도메인 또는 프로토콜, 포트가 다른 서버의 자원을 요청하는 매커니즘을 말한다.

브라우저에서만 가지고있는 CORS 정책이 있다.

클라이언트와 서버가 동일한 ip에서 즉 동일한 서버에서 동작하고 있다면 resource를 별 다른 제약없이 서로 공유하고 주고받을 수 있다.

하지만 클라이언트가 서버와 다른 ip에 있다면 원칙적으로는 그 어떤 데이터도 서로 주고 받을수 없다.
이런 경우 데이터를 서로 주고 받을 수 있으려면 서버에서 클라이언트에게 반응을 보낼 떄
Access-Control-Allow-Origin 이부분을 헤더에 추가를 해주면
클라이언트에서 서버가 허락을 했으니까 이 데이터를 가져와서 표기를 해도 되겠구나 라고 받아들여 클라이언트에서 데이터를 볼 수 있다.

기본적으로는 다른 아이피에서는 데이터 쉐어링이 불가능하다.
이를 해결하기 위해서는 서버에서 헤더에 Access-Control-Allow-Origin를 추가해 주어야 한다.

때문에 아래와 같이 미들웨어를 통해 설정해주어야 한다

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
  res.setHeader(
    'Access-Control-Allow-Methods',
    'OPTIONS, GET, POST, PUT, DELETE'
  );
  next();
});

이렇게 사용 할 경우 , 불편한 점은 헤더 이름에 대해서 정확하게 알고 있어야 하고,
헤더를 지정 할 때 조금만 오타가 나도 작동이 되지 않는다.

하지만 우리가 이렇게 일일히 타이핑을 해주지 않아도 되는 cors 미들웨어가 있다

npm i cors 를 이용해 설치
그 후에 import cors from 'cors';
그 후에 app.use(cors());

아무 옵션 없이 app.use(cors());로 설정한다면 모든 cross-origin 요청에 대해 응답한다. 특정 도메인 요청만 받는다거나, 특정 요청에만 응답하는 경우 그에 따른 옵션을 설정해야 함.

특정 도메인 접근 허용하는 옵션.

app.use(cors({
  origin: 'http://127.0.0.1:5500',
  optionsSuccessStatus: 200,
  Credentials: true,// 응답 헤더에 Access-Control-Allow-Credentials 추가
}));