[JS] CORS 이슈 Access-Control-Allow-Origin 문제 해결하기

CORS 이슈 Access-Control-Allow-Origin 문제 해결하기

 

 

 

 CORS 크로스 도메인 이슈

 AJAX를 이용하여, 다른 API의 데이터를 가져오려고 할 때, 갑자기 나타나는 에러이다. 정확한 원인은 알아보지 않아 잘 모르겠지만, 아무튼 같은 URL에서만 호출을 하도록 강제하는 정책이다. 아마도 브라우저 단에서 처리하는 것 같다.

 

 

 

해결 방법

 아무튼 그런건 모르겠고, 해결방법은 여러가지가 있다.

  1) 브라우저의 옵션으로 처리하기

  2) 크롬 플러그인을 설치하기

  3) 트릭

 

 

 사실 1~2번 방법이 의미가 없는게, 웹 서버 사용자에게 ActiveX처럼 설치하라고 강요할 수 없기 때문. 아무튼 해결 방법은 이렇게 하면 된다.

<script>
   $.ajax({
      url: "https://URL/",
      dataType: 'jsonp',
      success: function(data) {
        console.log('success - ', data);
      },
      error: function(xhr) {
        console.log('failure - ', xhr);
      }
    });
</script>

 

!!! JQUERY는 필수, 아직 시간이 없어서 JS만으로 처리하는 방법을 안찾아봄.

방법은 CSS나 JS와 같은 스크립트 로딩시에는 아무런 문제가 되지 않는 것을 이용하여, 브라우저를 속이는 것이다.

JSONP 타입을 이용하는데, 관련된 사항은 알아서 찾아보자.