[CORS] Cross Orgin Resourse Sharing

 

CORS ( Cross Orgin Resourse Sharing )

🚨 Access to fetch at ‘https://just-take-the-first-step.tistory.com’ 
from origin ‘http://localhost:3000’ 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 정책을 위반했기 때문인데, 출처가 다르다는 의미로 해석하면 쉽게 이해 될 수 있을 것 같다.

 

출처가 다르다?

출처(Origin) 이 다르다는 의미는 어떤 의미일까?

우리가 웹 URL은 이렇게 생겼는데,
같은 출처라는 것은, 프로토콜이 동일한지, 호스트가 동일한지, 포트가 동일한지 여부를 따진다.

포트같은 경우는 http / https 가 쓰는 포트가 정해져 있기 때문에 생략이 가능한데,
포트가 명시되어 있는 경우는 포트가 다르다면 다른 출처로 인식한다.

이 출처는 서버가 보내준 응답 헤더에 포함된 Access-Control-Allow-Origin 값이다.

이 서버가 허용해준 출처 값과 다른 출처라면, CORS 정책을 위반했다고 에러가 난다.
이 떄문에, CORS 정책을 보게되는 개발자는 프론트엔드 개발자이지만, 문제를 해결하기 위해서는 백엔드 개발자가 
서버 응답 헤더에 맞는 Access-Control-Allow-Origin 을 세팅 했는지가 중요하다.

 

CORS 는 브라우저 정책

CORS 는 서버에 특별한 로직이 존재하지 않는 이상, 서버는 정상적으로 응답해주고, 브라우저가 응답을 보고,
정책 위반이면 브라우저가 사용하지 않고 응답 데이터를 버린다.

즉, 브라우저 단에서 발생하는 정책이기 때문에 서버에 로그는 정상적으로 응답하였다는 로그가 남기 때문에,
이를 모른다면 해결하기 어려울 수 있다.

 

CORS 해결 방안

Access-Control-Allow-Origin 을 설정하자.

해당 정보를 와일드카드인 * 로 셋팅하면, 모든 출처를 다 받겠다는 의미이므로 편하게 사용 할 수 있지만,
모든 출처를 다 받기 떄문에, 보안적으로 매우 위험하다.

그러므로 출처를 명시해주자.
Access-Control-Allow-Origin : https://just-take-the-first-step.tistory.com/ 

프록시 서버로 우회하자.

프론트에서 개발을 할 때, localhost:3000 과 같은 곳에서 접근하기 위해서는 프록시를 설정해서
우회해주면 쉽게 속여서 요청할 수 있다.

npm i --save http-proxy-middleware

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/https://just-take-the-first-step.tistory.com",
    createProxyMiddleware({
      target: "http://localhost:3000/",
      changeOrigin: true,
    })
  );
};