CORS란?

CORS(Cross-Origin Resource Sharing)는 서로 다른 origin간에 리소스를 전달하는 방식을 제어하는 매커니즘으로,

SOP를 위반할시 CORS이슈를 접하게 됩니다.

 

여기서 SOP(Same Origin Policy,동일 출처 정책)란 자바스크립트 엔진 표준 스펙의 보안 규칙으로 
하나의 출처에서 로드된 자원이 호스트나 프로토콜, 포트번호가 일치하지 않는 자원과 상호작용하지 못하도록 요청 발생을 제한하고, 동일 출처에서만 접근이 가능한 정책입니다.

 

CORS 이슈는 요청 브라우저에서 다른 도메인을 가지는 서버로 요청이 갈때 브라우저에서 발생하는 이슈이며,

이를 해결하기 위해서는 여러가지 방법이 있는데 다음과 같습니다.

 

1. 동일 출처로 이동

 

-> 같은 도메인, 같은 포트로 이동시키면 해결됩니다.

 

2. 서버에서 Access-Control-allow-origin 헤더 추가

 

-> 서버에서 모든 클라이언트 요청에 대한 cross-orgin HTTP요청을 허가하는 Access-Control-Allow-Origin에 * 혹은 허용하고자하는 도메인의 헤더를 추가하면 됩니다. 다만 * 로 설정하게 되면 전체 호스트에 대해 요청을 허용하기 때문에 보안에 취약할 수 있습니다. 

 

3. Proxy Sever로 우회하기

 

-> 프록시 서버는 클라이언트가 프록시 서버 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해줍니다.  브라우저와 서버간의 통신을 보조하는 중계서버이지요.

해당 응답을 주고 받을때 프록시 서버에서 Access-Control-Allow-Origin : * 헤더를 담아 응답해주면 됩니다. 

기본적으로 CORS는 브라우저에서의 개념이기 때문에 서버와 서버간의 통신에서는 적용되지 않으므로 Proxy서버를 중간에 이용해서 해당 CORS이슈를 피하게 되는 것입니다.

 

---

참고하면 좋은 글 ) 

https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?