CORS

배경

토이프로젝트로 프론트서버 :3000에서 start라는 버튼을 누르면 백엔드서버 :3001로 요청을 보내는 부분을 만들고 있는데 CORS 에러가 떴다. 이 참에 정리해본다

 

CORS ( Cross-Origin Resource Sharing) 란

 

다른 출처가 리소스를 요청할 때 발생하는 에러이다.

해결법을 통해 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있게 브라우저에게 알려준다.

 

CORS 발생하는 이유, 목적?

 

1. 브라우저는 요청헤더에 자신의 출처 origin 를 담아 요청을 보낸다.

 

2. 서버가 이 요청에 응답을 할때 응답 헤더에  Access-Control-Allow-Origin에 이 리소스에 접근 가능한 출처를 보낸다

 

3. 클라이언트에서 자신의 origin과 서버가 보낸 Access-Control-Allow-Origin을 비교해서, 자신의 origin이 접근 가능한 목록에 없으면 CORS 에러가 발생한다.

 

 

위처럼 다른 출처에서 가져온 리소스를 제한하는 보안방식을 SOP : same-origin-policy (동일출처정책) 이라고 하며 사용자의 정보를 보호하기 위해서 CORS에러가 발생한다.

 

하지만

회사내부에는 다른 출처의 서버가 여러개가 있고, 개발을 하다보면 외부 서버API를 사용해야하는데, 이때는 CORS를 허용해서 다른 출처간의 리소스를 공유할 수 있도록 해야한다.

 

CORS 허용하는 방법

서버에서 Access-Control-Allow-Origin 헤더 세팅하기

node.js에서는 cors미들웨어를 설치하고

• 모든요청을 허용하던가 app.use(cors())
• 특정요청을 허용할 수 있다 app.use(cors(corsOption))

const cors = require("cors");

const allowedOrigins = ["http://192.168.199.158:3000", "http://localhost:3000"];

const func = (origin, callback) => {
  console.log(origin, allowedOrigins);
  if (allowedOrigins.includes(origin)) {
    callback(null, true);
  } else {
    callback(new Error("Not allowed by CORS"));
  }
};

const corsOption = { origin: func };
app.use(cors(corsOption));

 

 

참고