CORS

SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방식이다.
요구사항이 복잡해지면서 다른 도메인의 리소스를 활용하는 경우가 많아졌기 때문에 등장했다.

동작 원리

CORS 요청 전 Preflight Request를 통해 허가된 출처인지 확인한다.

브라우저가 다른 출처의 서버로 요청할 때는 요청 헤더에 자신의 출처를 나타내는 Origin 값을 포함한다.

Origin: https://app.example.com

서버가 해당 출처를 허용한다면 응답에 다음과 같은 헤더를 포함한다.

Access-Control-Allow-Origin: https://app.example.com

브라우저는 요청의 Origin과 응답의 Access-Control-Allow-Origin을 비교한다.

출처가 허용되어 있으면 응답 데이터를 JavaScript에 전달하고, 허용되어 있지 않거나 CORS 응답 헤더가 없다면 서버가 정상적으로 응답했더라도 JavaScript가 해당 응답을 읽지 못하게 차단합니다.

중요한 점은 CORS 오류가 발생했다고 해서 요청 자체가 항상 서버에 전달되지 않은 것은 아니라는 것입니다. 단순 요청의 경우 실제 요청이 이미 서버에 전달되어 데이터 변경까지 발생했지만, 브라우저가 응답만 차단했을 수도 있습니다.

일부 요청은 Preflight Request가 발생하지 않으며 조건은 다음과 같다.

Content-Type이 다음과 같은 GET, HEAD, POST 요청
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain

자세한 내용은 해당 글 참고

교차 출처 리소스를 호스팅하는 서버가 실제 요청을 허가할 것인지 확인하기 위한 메커니즘이다.

단순 요청 혹은 이전에 응답받은 Preflight 응답이 캐싱되어 있는 경우에는 Preflight 요청이 일어나지 않는다.

해당 요청을 통해 CORS 정책을 위반하는 요청으로 인한 서버 부하를 줄인다.