CORS(Cross-Origin Resource Sharing) policy 오류 해결

cors가 적용되는 구조 이미지, 출처 : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

CORS의 의미

Cross-Origin Resource Sharing의 약자입니다. 브라우저에서 다른 출처(다른 주소)의 리소스를 공유하는 방법

대부분의 브라우저는 동일 출처 정책을 따르고 있기 때문에 다른 uri의 리소스를 ajax 등으로 가져오려고 하면
Access to XMLHttpRequest at from origin has been blocked by CORS policy : No 'Access-Control-Allow-Origin' header is present on the requested resource 오류가 발생합니다.

동일 출처 정책(Same-Origin-Policy)이란?

여기서 말하는 동일출처(origin)의 범위는 url에서 포트까지 포함된 경로를 말합니다. 예를 들면 https://m.AOrigin.co.kr:8080/web/main.html 의 url이 있다고 가정하면

• https: -> protocol
• m.AOrigin.co.kr -> hostname
• 8080 -> port

위 요소를 포함한 https://m.AOrigin.co.kr:8080 여기까지가 동일 출처 즉 origin이 됩니다.
위 origin 요소에서 https://www.BOrigin.co.kr 의 어느 자원을 요청을 한다면 브라우저에서는 동일출처 정책에 위반되어 No 'Access-Control-Allow-Origin' header is present on the requested resource 오류를 것이 지요. 실제 오류 메시지를 크롬 개발자 도구에서 확인해 보면

크롬 개발자도구에서 cors policy 오류 메시지

위와 같은 오류가 발생합니다. 위 경우는 m으로 시작하는 모바일 경로에서 www로 시작하는 웹사이트 경로의 자원을 가져오려고 했을 때 발생하는 오류입니다.

해결방법

가장 단순한 방법은 A서버에서 B자원을 요청했을 때 B서버에서 response header에 ‘Access-Control-Allow-Origin’ 값을 설정해 주면 됩니다. 검색을 해보면 답이 많이 나오기 때문에 본인의 환경에 맞게 response header를 설정해 주면 됩니다. 저 같은 경우는 위 ’B Origin’ 서버에서 자원을 요청받았을 때 HttpServlerResponse에 header 설정을 해주었습니다.

response.addHeader(“Access-Control-Allow-Methods”, “POST, GET”); 

response.addHeader(“Access-Control-Max-Age”, “3600”); 

response.addHeader(“Access-Control-Allow-Headers”, “x-requested-with”); 

response.addHeader(“Access-Control-Allow-Origin”, “https://m.AOrigin.co.kr”);

response.addHeader(“Access-Control-Allow-Methods”, “POST, GET”); // 요청을 허용하는 메서드, get과 post요청에 대해 허용하겠다는 의미입니다.

response.addHeader(“Access-Control-Max-Age”, “3600”); // Access-Control-Max-Age는 Preflight request를 캐시 할 시간입니다. 단위는 초단위이며, 3,600초는 1시간입니다. Preflight Request를 웹브라우저에 캐시 한다면 최소 1시간 동안에는 서버에 재 요청하지 않을 것입니다.

response.addHeader(“Access-Control-Allow-Headers”, “x-requested-with”); // 보통 AJAX 호출이라는 것을 의미하기 위해 비공식적으로 사용되는 절차입니다. JQuery 또한 AJAX 요청 시, 이 헤더(x-requested-with)를 포함하는 것을 확인하실 수 있습니다. 여기서는 이 요청이 Ajax 요청임을 알려주기 위해 Header에 x-request-width를 설정합니다.

response.addHeader(“Access-Control-Allow-Origin”, “https://m.AOrigin.co.kr”); // * 로 설정해 주면 모든 origin 페이지에 대해 허용하기 때문에 보안이슈상 특정 도메인만 허용했습니다.

위와 같이서버에 설정해주면 CORS policy 오류 없이없이 다른 url의 자원을 가져오는 것이 잘 동작 했습니다. 동일한 오류가 나는 분들에게 제 포스팅이 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다.