5. CORS

CORS 정책

Cross-Origin Resource Sharing

다른 출처 간의 리소스 공유에 관련된 정책

 

여기서 출처는 URL에서 Protocol, Host, Port 부분을 말한다

https://www.example.com:443/test?param=2

 

같은 출처에서만 리소스를 공유할 수 있는 SOP(Same-Origin Policy)이라는 보안 정책이 있다

여기서 몇가지 예외 조항이 둬서 다른 출처 리소스 공유를 부분적으로 허용하는데 그 중 하나가 CORS 정책을 지킨 리소스 공유이다

 

CORS 에러

CORS 정책을 위반을 검사하는 주체는 서버가 아닌 브라우저이다

CORS 정책을 위반하는 요청에도 별도의 CORS 관련 별도의 로직이 없으면 서버는 응답한다

CORS 위반 에러를 보더라도 서버에서 응답 성공 로그를 확인할 수 있다

하지만 브라우저가 서버로부터 받은 응답을 보고 CORS 정책을 위반했는지 판단을 하고 위반하면 응답을 파기한다

 

브라우저는 요청 헤더에 Origin 필드에 요청 주체의 출처를 넣어서 보낸다

서버는 응답 헤더에 Access-Control-Allow-Origin 필드에 리소스에 접근하는 것이 허용된 출처를 넣어서 보낸다

브라우저는 앞서 언급한 두 필드를 비교해서 CORS 정책 위반 여부를 판단한다

 

에러 해결방법

보통 CORS 에러는 서버에서 Access-Control-Allow-Origin 필드에 프론트의 출처가 없어서 발생한다

그렇기 때문에 해당 필드에 프론트의 출처를 추가해주면 대부분 문제가 해결된다

Django의 경우 django-cors-headers 미들웨어 라이브러리를 통해 해결할 수 있다

 

하지만 또 다른 문제는 실질적으로 CORS 에러를 받는 쪽은 프론트엔드이기 때문에 서버 코드에 접근하지 못할 가능성이 크다

프론트의 경우 많이들 Webpack과 Webpack Dev Server를 사용해서 개발환경을 구축한다

이 라이브러리에서 제공하는 리버스 프록시를 활용하면 CORS 정책을 우회할 수 있다

리버스 프록시를 통해 프론트의 출처를 서버와 동일하게 바꿔줘서 브라우저가 같은 출처의 요청으로 인식하게 하는 방법이다