Ajax로 GET 방식 요청 시 CORS 정책 문제 해결(교차출처리소스공유 문제)

문제 상황

Ajax GET 방식을 통해서 request를 요청 했는데 아래와 같은 에러가 발생

Access to XMLHttpRequest at 'http://api.vworld.kr/~~~~`' 
from origin 'http://127.0.0.1:5502' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS? (교차출처리소스공유란?)

아래 사이트에 자세한 사항이 나와 있습니다.

developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
교차 출처 요청의 예시: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.
보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

by https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

CORS Policy 문제 해결

구글링해서 아래 웹페이지를 참고해서 문제해결

velog.io/@jmkim87/%EC%A7%80%EA%B8%8B%EC%A7%80%EA%B8%8B%ED%95%9C-CORS-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90

https://velog.io/@jmkim87/%EC%A7%80%EA%B8%8B%EC%A7%80%EA%B8%8B%ED%95%9C-CORS-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90

 

저 같은 경우로 ajax로 GET방식으로 요청하기 때문에 dataType: "jsonp"를 추가해서 해결 하였습니다.