[네트워크] CORS 너 뭐냐?? 🐥

웹 애플리케이션을 개발하고 클라이언트와 서버가 통신하는 과정에서는 항상 CORS 이슈를 마주하게 된다.

나도 처음에 웹 통신을 하면서 CORS 문제가 터졌을 때 CORS가 뭔지도 모르고 어떻게 해결할지 잘 몰랐다.

사실 지금도 잘 모른다...ㅋㅋㅋ

이번 기회에 CORS가 무엇인지 조금 깊이 있게 공부해보겠다..!!

출처란?

URL 구조

출처가 무엇인지 알아보기 위해서는 URL의 구조를 살펴보아야 한다.

 

포트 번호가 생략된 이유는 http, https 프로토콜의 포트번호는 정해져 있기 때문이다.
http는 80번, https는 443번 포트가 디폴트 값이다.

출처(Origin)

이때 출처는 Protocol, Host, 포트번호를 의미한다. 즉 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐놓은 것이다.

http or https -> 프로토콜
naver.com or google.com -> 호스트
:80 or :81 or :443 -> 포트 번호

동일 출처 정책 (Same-Origin Policy, SOP)

CORS를 알아보기 전에 SOP를 먼저 알아보자

SOP는 말 그대로 자신과 동일한 도메인만 서버로부터 데이터를 요청하여 받을 수 있도록 하는 정책입니다.

 

예를 들어 https://gyeongsuuu.tistory.com URL로 서버에 요청을 보내면 서버는 https://gyeongsuuu.tistory.com URL로만 응답을 보낼 수 있습니다.

이처럼 SOP는 동일한 출처(Origin, URL)로만 응답을 허용합니다. 브라우저는 강제적으로 SOP를 기본으로 합니다.

동일 출처 예시

• http://example.com/hello와 http://example.com/bye는 다른 URL이지만, 프로토콜, 호스트, 포트가 모두 같으므로 동일 출처이다.
• http://exmaple.com와 https://example는 같은 리소스를 가졌지만 프로토콜이 다르므로 동일 출처가 아니다.
• http://example.com와 http://example:80은 다른 출처 같지만, 전자의 경우 http프로토콜을 사용하니 포트번호인 80이 생략된 형태이므로 이는 같은 출처라고 할 수 있다.

동일 출처와 교차 출처의 기준은 Protocol, Host, Port 동일 여부입니다. 이 중 하나라도 다르다면 그 URL은 교차 출처로 인식됩니다.

 

SOP에 대해 어느 정도 알아보았으니, 이제 이 SOP를 풀어주는 역할인 CORS에 대해 알아보도록 하겠습니다.

 

출처 비교와 차단은 브라우저가 한다

개발자들이 착각하는 부분이 위의 출처 구분을 서버가 하는 것으로 오해하는 것이다. 아무대로 서버에 요청을 했는데 무언가 에러가 뜨면 서버가 문제라고 생각이 들 수밖에 없기 때문이다. 그러나 출처를 비교하는 로직은 서버에 구현된 스펙이 아닌 브라우저에 구현된 스펙이다.

 

CORS란?

Cross-Origin Resource Sharing의 줄임말로, 한국어로는 교차-출처 리소스 공유라고 한다. 교차 출처가 무엇이냐, 쉽게 말해 다른 출처라고 말할 수 있다.

SOP가 동일한 출처 간에만 요청과 응답을 허용하는 정책이었다면 CORS는 그와 반대로 서로 다른 출처 간에도 요청과 응답을 허용하는 정책입니다. 출처가 달라도 CORS옵션을 허용해 주면 다른 출처로 응답을 보낼 수 있게 됩니다.

CORS 관련 이슈는 왜 발생하는 걸까?

1. 출처가 다른 도메인 또는 포트로 리소스를 요청할 때

CORS 정책에 따라, 출처가 다른 도메인이나 포트에서 리소스 요청을 하는 경우에는 브라우저에서 CORS 에러가 발생한다.

이 경우에는 서버 측에서 Access-Control-Allow-Origin헤더를 설정하여 요청을 허용해야 한다.

2. HTTPS에서 HTTP로 리소스 요청할 때

보안상의 이유로 HTTPS에서 HTTP로 리소스 요청하는 경우에도 CORS 에러가 발생할 수 있다. 이 경우에는 HTTPS로 통신하는 서버에서 HTTP로 요청을 전달하는 것이 아니라, HTTPS로 전달해야 한다.

 

CORS 해결 방법

서버 쪽 해결 (Response)

HTTP 응답헤더 Access-Control-Allow-Origin : * 혹은 Access-Control-Allow-Origin: 허용하고자 하는 도메인 설정해 주기.
일반적으로 Default로 설정되어 있음.

 

클라이언트 해결 (Request)

리소스 요청하는 서버 사이에 프록시 서버를 하나 거쳐서 요청, 응답을 주고받기.

 

프록시 서버는 헤더를 추가하거나 요청을 허용/거부하는 역할을 중간에서 해줘서 Access-Control-Allow-Origin : *의 헤더를 담아 응답해 준다.

아무래도 중간단계가 있기 때문에 속도가 느려지는 단점이 있다.

 

---

Reference

• https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F   
• https://willseungh0.tistory.com/170
• https://velog.io/@jimmy0417/WEB-CORS-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95