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

대충 요약하면..

• 기본적으로 SOP(Same-Origin-Policy)라는 '같은 출처에서만 리소스를 공유할 수 있다는 정책이 있음.

- 여기서의 '출처'는 'Scheme', 'Host', 'Port' 세 가지가 동일하다면 같은 출처로 봄. 더 자세한 내용은 상기 링크 참조

• 그러나 현실적으로 서로 다른 출처에서 리소스를 공유해야할 필요성이 큼.
• 때문에 SOP에 예외사항을 둔다. CORS라는 정책을 만족한다면 다른 출처라도 리소스를 공유할 수 있도록 함
• 다만, 출처를 비교하는 로직이 브라우저측에 있다.
• 때문에 서버끼리 통신을 할 때는 CORS 정책이 적용되지 않는다. CORS 때문에 에러가 발생했어도 서버 쪽에는 정상 응답 로그가 남기에, 에러를 찾기 어려워질 수 있다.

다른 출처를 가진 리소스 사용 구조

• 웹 클라이언트 어플리케이션이 HTTP 프로토콜을 통해 리소스를 요청하는데, 이때 요청하는 출처를 담아서 보낸다.
• 그러면 서버는 이 요청에 대해 '우리 리소스에 접근해도 되는 출처'라는 인증 표시를 'Access-Allow_Origin'이라는 값에 담아주고 다시 브라우저로 보낸다.
• 브라우저측에서는 자신이 보냈던 요청 출처와 서버가 보내준 인증을 비교한 후 유효한 응답인지 결정한다.

기본 구조는 이렇지만 CORS 동작 방식은 세 가지의 시나리오에 따라 변경된다.

Preflight Request

• 브라우저가 본 요청을 보내기 전에 예비 요청을 보냄. 이 예비 요청을 Preflight라 칭한다.
• 이 예비 요청의 의의는 이 요청이 안전한 것이지 확인하는 용도이다.

Simple Request

• 예비 요청 없이 바로 본 요청.
• 특정 조건을 만족할 때만 사용 가능.
• 조건이 까다롭기에 잘 사용되지 않는다.

Credentialed Request

• 인증된 요청을 사용하는 방법.
• 다른 출처 간 통신에서 보다 보안을 강화하고 싶을 때 사용하는 방법.
• 기본적으로 브라우저에서 제공하는 비동기 리소스 요청 API인 XMLHttpRequest나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 이때 요청에 인증관 관련된 정보를 담을 수 있게 해주는 옵션이 credentials 옵션이다.
• 여기서의 3가지 옵션 :

- same-origin : 같은 출처 간 요청에만 인증 정보를 담을 수 있다

- include : 모든 요청에 인증 정보를 담을 수 있다

- omit : 모든 요청에 인증 정보를 담지 않는다

만약 same-origin이나 include 같은 옵션을 사용한다면, 브라우저는 다른 출처의 리소스를 요청할 때 좀 더 빡빡한 검사 조건을 추가한다.

Access-Control-Allow-Origin 값으로 *를 설정한다면 다른 출처에서 리소스를 요청할 때 CORS 정책 위반으로 인한 제약을 받지 않는다.

그래서 localhost와 같은 로컬 개발 환경에서도 fetch를 사용하여 마음대로 리소스를 요청하고 받아올 수 있다.

크롬 브라우저에서의 credentials 기본 값은 same-origin이기에 Access-Control-Allow-Origin 값이 *이라면 항상 요청이 안전하다고 판단내린다.

반면, credentials값에 include를 넣는다면, Access-Control-Allow-Origin 값으로 *가 들어있을 때 브라우저는 '인증 모드가 include인데 너는 왜 Access-Control-Allow-Origin 값에 *를 넣냐'라고 에러 메시지를 낸다.

이처럼 요청에 인증 정보가 담겨있는 상태에서 다른 출처의 리소스를 요청하면 브라우저는 CORS 정책 위반 여부를 검사하는 룰에 다음 두 가지를 추가하게 된다.

1. Access-Control-Allow-Origin 에는 *를 사용할 수 없고, 명시적은 URL이어야 한다.
2. 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야한다.

CORS를 해결할 방법..

• Access-Control-Allow-Origin 값 세팅하기

Access-Control-Allow-Origin : https://~~와 같이 출처를 명시해준다(미들웨어 활용 추천).

• Webpack Dev Server로 리버스 프록싱하기

프록시 기능이 포함된 라이브러리를 이용하여 브라우저로 하여금 같은 출처에서 리소스를 요청한다고 속이는 방법(로컬환경 한정해서..).

이 방법은 prod 환경에서 client-server 간의 출처가 같은 경우에 사용하는 것이 좋다.