CORS 에러

외부 API POST 호출시에

The 'Access-Control-Allow-Origin' header has a value 'https://localhost:3000' that is not equal to the supplied origin.
라는 오류를 마주하고, CORS에러라는 것에 대하여 알게 되었다.

 

CORS정책이란?

CORS란 교차 출처 리소스 공유(Cross Origin Resource Sharing)의 줄임말로, 서로다른 출처간의 리소스를 전달하는 방식을 제어하는 체제 이다.
나 같은 경우에서는 localhost3000인 프론트엔드에서 localhost8000인 백엔드로 리소스를 전달하는데에 있어 CORS정책으로 인해 차단된 것이다.

 

우선 출처(Origin)이란,

Protocol(http,https) + Host(사이트 도메인)+ Port(포트번호)

를 모두 합친 URL이다.

여기서 SOP(Same origin Policy) 정책에 따르면 '동일한 출처에서만 리소스를 공유할 수 있다'라는 법률이 있고, 악의적인 경우를 방지하기 위해 다른 출처의 스크립트가 실행되지 않도록 브라우저에서 사전에 방지한다.

여기서 출처를 비교 하고 차단하는 로직은 서버에 구현된 스펙이 아닌 브라우저에 구현된 스펙이다. 

 

하지만 다른 출처의 리소스를 사용하는 일은 매우 흔한일이므로 몇가지 예외 조항을 두고 다른 출처의 리소스 요청을 허용하는데, 그 중 하나가 CORS 정책을 지킨 리소스 요청이다.

 

결국 내가 직면했던 에러는 브라우저의 SOP정책에 따라 리소스를 차단하면서 발생한 에러이며, CORS는 다른 출처의 리소스를 얻기 위한 해결 방안 인 것이다. 

 

CORS의 기본 동작

1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달

- 요청 헤더에 Origin이라는 필드에 출처를 함께 담아서 보낸다.

 

2. 서버는 응답헤더에 Allow-control-allow-origin을 담아 클라이언트로 전달한다.

-필드를 추가하고 값으로 '이 리소스를 접근하는 것이 허용된 출처'라는 것을 전달한다.

 

3. 클라이언트에서 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.

-이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버의 응답의 Access-control-allow-origin을 비교하고 유효하지 않다면 그 응답을 사용하지 않고 버린다.

 

결국 해결책은 서버에서 Access-control-allow-origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답 해야하는 것이다.

 

다른 해결방법들로는 1. 다른 프록시 서버 이용 , 2. http-proxy-middleware 라이브러리 사용 등이 있다.
그치만 그냥 서버에서 헤더를 제대로 세팅해주는 것이 가장 기본적인 해결방법임을 명심하자 !!!!

 

참고 링크:https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F