[Error] CORS 에러 해결 방법

 

갑자기 스크립트가 동작 안하는 현상때문에

개발자모드를 확인해봤더니 아래와 같은 에러가 발생하였습니다.

CORS 정책에 의한 에러 현상이군요..

 

 

 

 

현상

 

 

Access to XMLHttpRequest at 'https://TESTdb.org/geoserver/antos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TEST%
TEST&outputFormat=application%2Fjson' from origin 'http://TESTdb.org' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

 

'http://TESTdb.org' 원본에서 'https://TESTdb.org/geoserver/antos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TEST%
TEST&outputFormat=application%2Fjson'의 
XMLHttpRequest에 대한 액세스가 차단되었습니다.
 CORS 정책: 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.

 

 

 

 

 

 

 

원인

 

 

CORS 정책에 의해, 요청된 리소스에 Access-Control-Allow-Origin 해더가 없다는 것이 주 내용입니다.

 

 

CORS (Cross-Origin Resource Sharing, CORS) 는 '교차 출처 리소스 공유' 라고도 불립니다.

추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의

선택한 자원에 접근할 수 있는 권한을 부여하도록  브라우저에 알려주는 체제입니다. 

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

 

예를들어 저 같은 경우,

https://TESTdb.org 의 자바스크립트 코드가 

XMLHttpRequest를 이용하여

https://TESTdb.org/geoserver/antos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TEST%
TEST&outputFormat=application%2Fjson

를 요청할 경우 보안상의 이유로 HTTP요청을 제한하는 현상입니다. 

 

 

 

 

 

 

 

반응형

 

 

 

 

 

해결방법

 

 

이를 해결하기 위해선 요청하는 URL에  cors에 관한 API를 붙여서

CORS 해더없이 제공 가능하도록 만들도록 해야합니다.

 

 

요청하는 URL에 https://cors-anywhere.herokuapp.com/ 를 붙여주시면 됩니다.

https://cors-anywhere.herokuapp.com/ 를 접속하면 아래와 같이

CORS 헤더없이 제공되는 리소스 및 쿠키 비활성화 등,

상세 내용이 나오니 참고하시면 될 것 같습니다.

 

또는

 

 

위에 https://cors-anywhere.herokuapp.com/ 가 제약사항에 걸릴 경우라면,

https://proxy.cors.sh/ 를 붙여주시면 프록시 서비스를 이용하실 수 있습니다.

 

 

 

 

 

 

 

예시

 

 

cors-anywhere

 

"https://cors-anywhere.herokuapp.com/https://TESTdb.org/geoserver/antos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TEST%TEST&outputFormat=application%2Fjson"

 

 

cors.sh

 

fetch('https://proxy.cors.sh/https://example.com')
 
// or...
functon fetchWithProxy(url, params){
  return fetch(`https://proxy.cors.sh/${url}`, params)
}
 
fetchWithProxy('https://example.com')