CORS 에러

CORS?

이전에는 같은 도메인의 백엔드로만 api콜을 줄 수 있는 SOP(Same Origin Policy)만 가능했기에, 다른 도메인(origin)에게서 api 콜을 보내고 데이터를 받아오기가 어려웠다.

이를 해결하게 해 준 것이 CORS다. Cross Origin Resource Sharing의 약자인 CORS는 한 도메인의 페이지가 다른 도메인 에서의 리소스에 액세스 할 수 있게하는 보안 장치이다. CORS를 허용하지 않는다면 이전의 SOP정책처럼 동일한 출처의 리소스에서만 요청을 할 수 있다.

브라우저에서 CORS를 막는 이유는 브라우저 쿠키와 연관되어 있는데, 브라우저에서 쿠키에 데이터를 저장하게 되면 쿠키에 저장된 api가 자동으로 백엔드에 따라다니므로 보안상의 문제가 생길 수 있다.

CORS 에러 해결법

Proxy server 를 사용하는 방법

CORS는 브라우저에서의 접근을 막기 때문에 모바일이나 백엔드에서는 차단하지 않는다. 이를 이용하여 백엔드에서 백엔드로 요청을 하는 방법을 택하는데, 이를 가능케 하는 게 proxy server(대리 서버)이다. 같은 도메인에 프록시 서버를 만들어서 백엔드 api 요청을 하고(우회), 프록시 서버에서 브라우저로 데이터를 받아올 수 있다.

백엔드 서버 구축 시 내 서버에서 CORS를 허용하는 방법 (GraphQL)

const server = new ApolloServer({
  ...
  cors: {
    origin: true // 모든 도메인에서 cors가 허용된다.
  }
});

const server = new ApolloServer({
  ...
  cors: {
    origin: [ // origin array에 cors를 허용하고자 하는 도메인을 넣는다.
      "http://mysite.com",
      "http://yoursite.com"
    ]
  }
});