CORS 란?

• 정의, 대처방법, etc

정의

Cross Origin Resource Sharing의 약자로, 교차 origin을 가진 리소스간의 세어링을 허용하는 것이다.

관련된 상황

내가 만들고 있는 웹페이지에서 네이버 map api를 호출할때와 같은것.

이때 브라우저에 CORS관련 빨간색 에러가 뜰 수 도 있다.

브라우저는 SOP정책에 의거해 이런 메세지를 뜨우는 것이다.

만약, 내가 누군가 보낸 익명의 이메일을 클릭해, 현재 브라우저에 접속중의 다른사이트의 정보가, 이상곳으로 이동한다면 문제가 생기지 않겠는가?

또한 참고하여 알아둬야 할것.

원래는 브라우저는 SOP 정책을 엄격하게 준수하였는데

시대가 변하고 상황이 다양해짐에 따라, 브라우저에서도 CORS를 허용해서 다른 오리진 간의 데이터를 주고받아야할 요구가 생겼었음.

Cross Origin인지는 어떻게 확인할까?

요청에 따라 다르다!

Preflight Request

Simple request

credentialed request

이러한 요청에 대한 구분은 브라우저가 한다.(MDN 자료를 참고할것.)

preflight 본요청을 보내기 전에 예비요청을 보낸다.

simple request는 요청은 보내지만, 그 응답헤더를 브라우저가 확인하고, 에러를 띄울지 결정한다.

관련된 에러를 해결하기 위한 방법

• access-control-allow-origin 세팅하기

spring, django, express 에서 관련된 설정하는 법을 참고하자.

그렇게 하면, 요청을 받는 서버에서, 응답헤더에 access-control-allow-origin관련 정보를 담아 보내게 된다.

이것을 브라우저가 확인했을때, 비교하는 것이다.

• 리버스 프록싱 하기.

프론트랑 백으로 나눠진 로컬개발환경에서 주로 마주치는 문제를 해결하기 위한 방법

리액트의 리버스 프록시 설정을 했던 것을 떠올리자.

이렇게 설정해두면

브라우저에서 보내는, 백엔드 api 요청을 브라우저는 so로 인식하고 있고 사실은 뒷단에서 리버스 프록시 역할로 다른 곳에 응답을 대신보내게 된다.

참고자료

https://www.youtube.com/watch?v=bW31xiNB8Nc

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#접근제어시나리오_예제

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