CORS(교차 출처 자원 공유 방식)

CORS(cross-origin-resource-sharing)
브라우저가 자신의 출처(origin)가 아닌 다른 어떤 출처로 부터 자원을 로딩하는 것을 허용하는 현상

originA에서 originB로 자원을 요청하는 현상

Origin과 Domain

1. 도메인
   웹사이트의 주소를 가리킴

   예: www.example.com

2. 오리진
   웹 요청의 출처를 나타냄 (프로토콜+도메인+포트 로 구성)

   예: https://example.com:443

CORS 요청

기본적으로 웹 클라이언트 어플리케이션이 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아보낸다.
Origin: https://evan-moon.github.io

이후 서버가 이 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin이라는 값에 “이 리소스를 접근하는 것이 허용된 출처”를 내려주고, 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 이 응답이 유효한 응답인지 아닌지를 결정한다.

1. 단순 요청
   일반적인 요청에 대해서는 cors 검사를 하지 않는다
   즉, 요청을 보내는데 통과를 못하면 답장만 못 받아오는 것이다

Simple Request(단순 요청)는 Preflight Request(사전 요청)와 다르게 요청을 보내면서 즉시 cross origin인지 확인하는데, 다음 조건을 모두 충족해야한다.

메서드는 GET POST HEAD 중 하나
헤더는 Accept, Accept-Language, Content-Language, Content-Type 만 허용
Content-Type 헤더는 다음의 값들만 허용
application/x-www-form-urlencoded
multipart/form-data
text/plain

2. 사전 요청
   요청 자체를 보내기전에 먼저 허용 여부를 검증한다
   즉, 브라우저는 요청을 한번에 보내지 않고 예비 요청과 본 요청으로 나누어서 서버로 전송한다.

   이 예비 요청에는 HTTP 메소드 중 OPTIONS 메소드가 사용

Preflight Request(사전 요청)는 요청을 예비 요청과 본 요청으로 나눈다. OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 (실제 요청이 전송하기에 안전한지) 확인 작업을 하고, 요청이 가능하다면 실제 요청을 보낸다.

주로 발생하는 오류

access control allow oringin 헤더가 필요하다고 오류가 발생

해결 방법

1. access control allow origin를 서버에서 응답 헤더로 넣어주기

2. 프론트 쪽에서 proxy를 사용해서 대신 요청을 하게함

SOP (동일 출처 정책)

sop(same-origin-policy)
같은 출처에서만 리소스를 공유할 수 있다.

CORS는 SOP를 해결하기 위해 나온 것이라고 생각하자

참고: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS,
https://ingg.dev/cors/#cors_solution