[TIL] CORS 오류

CORS 

Cross-Origin-Resource-Sharing 

교차 출처 리소스 공유

 

최신 Git 을 pull 하고 화면을 열면 가끔 CORS 오류가 나와서 개념을 정리하려고 한다 

 

MDN Web Docs 에 의하면, 

CORS 는 브라우저가 자신의 출처가 아닌 다른 어떤 출처로부터
자원을 로딩하는 것을 허용하도록 서버가 허가해주는 HTTP 헤더 기반 메커니즘이다,
또한 교차 출처 리소스를 호스팅하는 서버가 실제 요청을 허가할 것인지 확인하기 위해 
브라우저가 보내는 "사전 요청" 매커니즘에 의존한다 
이 사전 요청에서 브라우저는 실제 요청에서 사용할 HTTP 메서드와
헤더들에 대한 정보가 표시된 헤더에 담아 보낸다 

 

 

🐣 앞의 문장이 와닿지 않아 다시 정리해 보면 🐣

CORS 는, 브라우저가 다른 출처의 리소스를 안전하게 가져올 수 있도록 서버가 허가해주는 방식이다 

 

 

CORS 에서 Origin 은 Protocol 과 Host, Port 까지 모두 합친 URL 를 의미한다 

Protocol - HTTPS://
Host - www.domain.com
Port - :1234 
Origin - HTTP://www.domain.com:1234

 

Same-Origin 은 말 그대로 동일한 출처, Cross-Origin 은 다른 출처이다 

같은 Protocol, Host, Port 를 사용하면, 그 뒤의 다른 요소들은 달라도 같은 출처로 인정되고 

단 하나라도 다르면 다른 출처이므로 브라우저가 정책 상 차단한다 

출처를 구분하는 것은 서버가 아닌, 브라우저이다 

브라우저에서 다른 출처에서 데이터를 요청하면, 서버는 특정 헤더를 통해 요청을 허용할지 여부를 브라우저에 알려주는데 

이 과정에서 서버에서 명시적으로 허용하지 않는 경우 브라우저가 요청을 차단하는 것이 CORS 오류이다 

 

좀 더 자세히 설명하면, 

1. 브라우저가 요청을 보낸다 - 브라우저(클라이언트)에서 다른 출처로 데이터를 요청한다 

2. 서버가 CORS 관련 헤더 없이 응답한다 - Access-Control-Allow-Origin 같은 헤더가 없거나 요청의 출처가 허용되지 않는 경우

3. CORS 오류 발생 - 이 때 브라우저의 개발자 도구 콘솔에 CORS 정책에 의해 요청이 차단되었다는 오류가 표시되는 것이다 

CORS 오류 정리 

서버가 CORS 관련 헤더를 제공하지 않거나, 클라이언트의 요청 출처를 허용하지 않으면 

브라우저가 요청을 차단하고 CORS 오류를 발생시킨다 

CORS 오류는 브라우저 보안 정책으로 인해 발생하는 오류이며,

서버에서 올바른 설정을 하면 해결할 수 있다

즉, 백엔드 개발자가 고쳐야 하는 Issue 이다 

 

끗