[Web] CORS란, CORS오류 해결

웹 생태계에는 다른 출처(origin)로의 리소스 요청을 제한하는 것과 관련된 두 가지 정책이 존재한다.

바로 CORS와 SOP다.

 

Origin, 출처

참고한 블로그에서 가져왔음...

이러한 url이 있을 때 origin은 protocol + host + port를 말한다.

예시 : https://www.evan-moon.com:80

 

https://www.evan-moon.com:80

https://www.evan-moon.com/about

https://www.evan-moon.com/about?name=ghost

세가지는 모두 같은 출처로 본다.

 

SOP(Same-Origin Policy)

“같은 출처에서만 리소스를 공유할 수 있다”라는 규칙을 가진 정책이다. 즉, 원래 웹에서는 같은 출처(origin)에서만 리소스를 공유할 수 있다.

 

그러나 웹상에서 다른 출처의 리소스를 가져와서 사용하는 일은 흔한 일이라, 출처가 다르더라도 예외가 있다.

바로 CORS정책을 지킨 리소스 요청이다.

 

CORS(Cross-Origin Resource Sharing)

다른 출처(origin)간의 Resource를 공유하는 것에 대한 정책을 CORS정책 이라고 한다. 

요청을 보낼 때 내 출처를 헤더에 적어서 보낸다. 그러면 서버는 "이 리소스를 사용하는것이 허용된 출처"에 대한 정보를 헤더에 담은 응답을 보내준다. 그러면 브라우저는 "내 출처"와 서버에서 응답받은 "허용된 출처"를 비교해 허용되면 pass, 아니면 에러를 낸다.

중요한 것은 출처를 비교하는 로직이 서버가 아니라 브라우저에 구현되어 있다는 것이다.

만약 우리가 CORS 정책을 위반하는 리소스 요청을 하더라도 해당 서버가 같은 출처에서 보낸 요청만 받겠다는 로직을 가지고 있는 경우가 아니라면 서버는 정상적으로 응답을 하고, 이후 브라우저가 이 응답을 분석해서 CORS 정책 위반이라고 판단되면 그 응답을 사용하지 않고 그냥 버리는 순서인 것이다.

 

 

CORS오류 해결법

1.Access-Control-Allow-Origin 세팅하기

서버에서 ~~출처에서 리소스를 받겠다고 세팅하는 부분이 바로 Access-Control-Allow-Origin이다.

*(wildcard)를 해주거나 정확한 출처를 밝혀주면 된다.

 

이 설정을 서버에서(apache등) 해도 되지만, 그 과정이 불편하기 때문에 소스코드에서 미들웨어를 사용한다.

Spring, Express, Django와 같이 이름있는 백엔드 프레임워크의 경우에는 모두 CORS 관련 설정을 위한 세팅이나 미들웨어 라이브러리를 제공하고 있다고 한다.

 

2. 프록시

예를 들어서, 사실 /html2canvas 로 요청을 했지만, 뒤에서는 /daum.net으로 프록싱하여 요청을 보내고 있는 것이다.

이렇게 하면, CORS정책을 지키는 것 처럼 속여서 자유롭게 통신이 가능하다.

 

참고

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