CORS란?

🔅 교차 출처 리소스 공유란? (CORS)

Same-Origin(동일 출처)의 반대 개념으로, 다른 출처간의 리소스를 공유할 수 있도록 하는 것.

• 출처 : 보내고 받는 각각의 위치(=웹 사이트와 API의 주소)
• 리소스 : 주고 받아지는 데이터

즉, www.sooyuni.com과 네이버 지도 API 같이 서로 다른 출처끼리 정보 요청과 반환이 가능하도록 하는게 CORS(Cross-Origin Resource Sharing).

CORS 정책 위반 에러는 주로 어떤 사이트가 다른 서버로 요청을 보낼 때 자주 접하게 되는 오류이다.

주소가 https://www.domainA.com 인 웹 사이트에서 url이 https://www.domainB.com인 서비스에 API로 정보를 받아오기 위해 프론트에서 http요청을 보낼 때, 미리 어떠한 설정을 해주지 않으면 CORS 정책 위반으로 인해 에러가 발생하게 된다.

주로 웹 사이트에서 AJAX를 보낼 때마다 안되는 경우가 많은데, 그 말은 웹 사이트를 여는 곳, 즉 크롬이나 엣지, 사파리 같은 브라우저에서 일어나는 문제이다.

🔅 브라우저가 CORS 정책 위반이란 이유로 요청을 막는 이유

브라우저가 '내가 방문한 사이트'를 믿지 못하기 때문이다.

🔅 CORS가 왜 있는걸까?

악의적인 목적을 가진 사이트에서 내 의지와 상관없이 내 브라우저에 저장된 정보들을 가지고 악의적인 행동을 할 수도 있고, 다른 API에 해괴한 짓을 할 수 있기 때문이다. 브라우저는 이런 일들을 방지하기 위해 CORS 정책 위반이란 이유로 요청을 막는 것.

정확히 말하자면 CORS는 막고 있는 요청을 풀어주는 역할이라고 할 수 있고, 어떤 사이트에서 다른 사이트로 요청이 못 가게끔 하는건 SOP(Same-Origin Policy)가 막고 있는 것이라고 할 수 있다.

SOP(Same-Origin Policy) : 동일한 출처 URL끼리만 API 등의 데이터 접근이 가능하도록 막는 것.

원래 브라우저에서는 서로 다른 출처끼리 요청을 주고 받는건 안되는게 기본 값이었는데, 웹 생태계가 다양해지면서 여러 서비스들간의 보다 자유롭게 데이터가 주고 받아질 필요가 생기게 되면서 초반에는 JSONP같이 꼼수를 써(?) 우회하는 방법을 사용하다가 합의된 출처들간에 합법적으로 허용해주기 위해 어떠한 기준을 충족시키면 리소스 공유가 되도록 만들어진 매커니즘이 CORS(교차 출처 자원 공유)방식이다.

🤔 기준을 충족 시키려면 어떻게 해야 할까??
요청을 받는 백엔드 쪽에서 이걸 허락할 다른 출처들을 미리 명시해두면 된다. (백엔드 서버를 프로그래밍할 때 쓰는 프레임워크 문서에 CORS 옵션을 넣는 방법들이 마련되어 있으니 참고!)

🔅 CORS의 작동 방식

- Simple Request (단순 요청)

예비 요청을 보내지 않고 바로 서버에게 본 요청을 전달한다. 서버가 이에 대한 응답으로 헤더에 Access-Control-Allow-Origin 값을 보내주면 브라우저가 CORS 정책 위반 여부를 검사한다.

- Preflighted Request (사전 요청)

브라우저는 요청을 한번에 보내지 않고 예비 요청과 본 요청으로 나누어서 서버로 전송한다.
OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인한다.
< cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와 같이 미리 전송(preflighted)하는 것 >

- Credentialed Requests (인증 정보를 포함한 요청)

Credentialed Requests는 HTTP cookies 와 HTTP Authentication 정보를 인식한다.
기본적으로 cross-site XMLHttpRequest 나 Fetch 호출에서, 브라우저는 자격 증명을 보내지 않는다. (민감한 정보이기 때문)
이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.

credentials 옵션의 종류는 아래와 같다.

• same-origin (default) : 같은 출처 간 요청에만 인증 정보를 담을 수 있다
• include : 모든 요청에 인증 정보를 담을 수 있다
• omit : 모든 요청에 인증 정보를 담지 않는다

또한 자격 증명 요청에 응답할 때 서버는 반드시 " * " 와일드카드를 지정하는 대신 Access-Control-Allow-Origin 헤더 값에 출처(명시적인 URL)를 지정해야 한다.

📚 참고 자료

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://youtu.be/bW31xiNB8Nc
https://velog.io/@young_pallete/CORS
https://evan-moon.github.io/2020/05/21/about-cors/