CORS란?

CORS란?

개발을 하다 보면 이런 에러를 만나본적이 많을거다.

Access to fetch at 'http://localhost:8080/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

이것은 현재 클라이언트 서버간에 통신을 할 때 CORS 정책에 의해 거부되었다는 에러이다.

CORS 정책이란?

클라이언트와 서버가 동일한 IP에서 동작하고 있다면 리소스를 서로 별다른 제약없이 공유할 수 있다.

그런데 만약 클라이언트와 서버가 다른 IP에 존재한다면 CORS 정책상으로 어떠한 데이터도 주고 받을 수 없다.

그렇다면 서로 다른 IP에 위치한 클라이언트와 서버가 데이터를 주고 받게 하려면 어떻게 해야할까?

서버에서 클라이언트에게 응답을 보낼때 헤더에 Access-Control-Allow-Orign 와 같은 내용을 헤더에 추가해주면 된다.

그러면 클라이언트인 브라우저는 헤더에 Access-Control-Allow-Orign 이 있는것을 보고 서버가 허용을 해줬다는 것을 인지하고 서버로 부터 받은 데이터를 브라우저에 표기를 해준다.

Access-Control-Allow-Orign 뿐만 아니라 CORS 정책과 관련된 다양한 설정이 존재한다.

express에서 Access-Control-Allow 설정하기

import express from 'express';

const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
  // 'http://127.0.0.1:5500' ip에 대한 요청을 허용
  
  // 혹은
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 모든 ip에 대한 요청을 허용
  
  
  res.setHeader(
    'Access-Control-Allow-Methods',
    'OPTIONS, GET, POST, PUT, DELETE'
  );
  // OPTIONS, GET, POST, PUT, DELETE 요청 메소드를 허용
  next();
});

app.get('/', (req, res) => {
  res.send('Welcome!');
});

app.listen(8080);

하지만 이렇게 일일히 복잡하고 긴 옵션을 항상 기억하면서 설정하기는 힘들다.

express에서 사용할 수 있는 cors 미들웨어를 사용하면 편리하다.

import express from 'express';
import cors from 'cors';

app.use(cors({
  // Acess-Control-Allow-Credentials 에'https:127.0.0.1:5500' 허용
  orgin: ['https:127.0.0.1:5500'], 
  optionsSuccessStatus: 200,
  credentionals: true, // Acess-Control-Allow-Credentials: true 설정
}));

app.get('/', (req, res) => {
  console.log(req.cookies);
});

자세한 사용법은 아래를 참고하자.

• express 공식문서
• express cors 깃허브

참고하면 좋은 자료
재영님의 CORS 블로그
재영님 😁