CORS

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

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

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

하지만 클라이언트가 서버와 다른 ip에 있다면 원칙적으로는 그 어떤 데이터도 서로 주고 받을수 없다.
이런 경우 데이터를 서로 주고 받기 위해서는 서버에서 헤더에 Access-Control-Allow-Origin 옵션을 추가하여 클라이언트에게 response를 보내주어야 한다.
이 과정을 거친 후 클라이언트 ip에 대해 서버가 승인했음을 알게되어 데이터를 받아볼 수 있다.

아래와 같이 미들웨어를 통해 헤더에 옵션들을 설정해주어야 한다.

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 middleware

하지만 위의 코드의 경우, 헤더 이름에 대해서 정확하게 알고 있어야 하고,
헤더를 지정 할 때 조금만 오타가 나도 작동이 되지 않는다.

하지만 cors middleware를 이용한면 일일히 타이핑을 해주지 않아도 된다.

npm i cors 를 이용해 설치하고
import 과정을 거쳐 => import cors from 'cors'
middleware로 등록한다 => 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 추가
}));

백엔드로 프로젝트를 참여했을 때, CORS 때문에 고생한 기억이 있다.
지금은 간략하게 정리해봤지만, CORS 옵션이나 개념에 대해 자세히 다루는 시간을 가져야겠다.

Reference

노드로 배우는 백엔드 A-Z