CORS ERROR에 대하여

 

 

Access to XMLHttpRequest at 'http:// #@$%@%#% API ' from origin 'http://pos.me:8080' has been blocked by CORS policy:No 'Access-Control-Allow-Origin' header is present on the requested resource.

라는 에러가 떴다.

 

무슨말인지 하나하나 뜯어보기로 했다.

Origin이란 프로토콜, 주소, 포트번호의 쌍을 말한다.

Origin = [프로톨콜]://[Host의 IP 주소 또는 URL]:[포트번호]

여기서 포트 번호는 생략가능하고, 생략했을때 HTTP 방식으로 오면 80, HTTPS 방식으로 오면 443을 이용하게 된다.

 

보안규칙에 의해서 Same Origin / Cross Origin Policy 때문에 내가 접속한 사이트에서 다른 Origin에 요청한 것들을 기본적으로 차단된다. 

Same Origin이 정책에 의해서 자바스크립트(XMLHttpRequest)로 다른 웹페이지에 접근할 때는 같은 출처(Same origin)의 페이지에만 접근이 가능하다. 같은 출처라는 것은 프로토콜, 호스트명, 포트가 같다는 것을 의미한다.

 

하지만 요즘은 여러 도메인에 걸쳐서 구성되고, REST API등을 이용한 외부 호출이 많아 지는 상황에 불편해지기 시작했다.

그래서 만들어진 추가 정책이 CORS(Cross-Origin Resource Sharing)이다. 이 정책의 특징은 서버에서 외부 요청을 허용할 경우 ajax요청이 가능해지는 방식이다.

 

에러를 해결하는 방법

"다른 Origin이더라도 허용해줘!"라고 서버가 응답할 때 알려주면 된다.

 

응답하는 서버 - "특정 사이트는 다른 Origin이라도 허용해!" : "Access-Control-Allow-Origin": 사이트명

허용할 Origin을 Access-Control-Allow-Origin 응답 헤더에 넣어주면 된다. 그러면 다른 Origin일지라도 json 데이터와 같은 자원들을 응답고 읽을 수 있게 된다.

• 모든 사이트를 허용하는 경우: "Origin을 Access-Control-Allow-Origin": *
• 특정한 사이트만 허용하는 경우: "Origin을 Access-Control-Allow-Origin": https://developer-mobssie.tistory.com/