CORS란? CORS 문제 해결하기

웹 개발자라면 한번쯤은 얻어맞아 봤을 법한 CORS(Cross-Origin Resource Sharing) 정책에 대한 이야기를

해보려고 한다. 사실 웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔해서

누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다.

 

이 CORS 관련 모든 것을 담은 링크를 발경하였습니다. 아래와 같이.

=> evan-moon.github.io/2020/05/21/about-cors/

 

참고로 우선 ,

   CORS란 다음과 같습니다.

 

CORS는 Cross Origin Resource Sharing의 약자로 도메인 및 포트가 다른 서버로 클라이언트가 요청했을 때 브라우저가 보안상의 이유로 API를 차단하는 문제입니다.  예로 들면 로컬에서 클라이언트는 3000 포트로 서버는 10000 포트로 서버를 띄웠을때 또는 로컬 서버에서 다른 서버로 호출할 때 발생하게 됩니다.

 

이 내용이 더 어렵게 느껴지네요.

 

해결방법은 그중에 proxy를 사용하는 방법이라고 합니다.예를들면,   다음과 같이.

 

공공데이터포털에서 코로나 확진자 현황 데이터를 가져와 보는 예에서~코드를 보면,

- xhr object를 open 한 다음 send()하셔야 request가 날아갑니다.
xhr.open();
xhr.onreadystatechange();
xhr.send(); 

- request가 제대로 날아간다고 해도 해당코드는 동작하지 않습니다.

서로 다른 서버에 있는 데이터의 경우 cors 정책에 따라 불러올 수 있게 되어 있는데, http://openapi.data.go.kr 는 해당 헤더가 설정되어 있지 않기 때문에 다른 사이트에서 ajax로 데이터를 불러올수는 없습니다.

- 해당 서버에 원하는 데이터를 불러오는 프록시 페이지를 만들어서 사용하는게 가장 쉬운 방법인데, 참고로 github pages에서는 그런게 지원 되는지 모르겠네요. 다른 서버 없이 github pages만 사용해서 저 데이터를 가져오긴 굉장히 귀찮아 보입니다.

 

이럴때,

   아래와 같이 해결 가능합니다.

- proxy로 해결 =>  

요즘은 proxy 서비스가 있네요.
https://pastebin.com/q3MVSHEH

 

위 링크의 코드를

    아래와같이 가져왔습니다.

"""

var requestURL = "https://cors.bridged.cc/" + url01 + key + url02 + startDate + url03 + endDate

var xhr = new XMLHttpRequest();

xhr.open('GET', requestURL);

xhr.onreadystatechange = function() {

    if (xhr.readyState == 4) {

         document.getElementById('response').innerHTML = xhr.responseText

    }

}

xhr.send();

"""

 

이렇게 코드를 변경하시면 일단 로드는 될겁니다.

 

  <= 여기서 질문: 

        CORS 문제 해결을 위한 proxy 서비스의 알려주신 링크를 보니,
        var requestURL = "https://cors.bridged.cc/" + url01 + key + url02 + startDate + url03 + endDate
        라는 코드가 있는데 여기서,
        위와같이 requestURL에 맨처음 "https://cors.bridged.cc/" 룰 추가하면 되는건가요?

 

        => 질문에 대한 답변:

                     저기가 그런 프록시 역할을 하는 곳이라고 하네요? 원본 데이터를 읽어와서 cors관련 헤더를

                     set해서 뿌려주는것 같습니다. 사용량 제한이 있는지는 모르겠네요

   

 

위와 같이,

   proxy를 제공하는 서비스를 이용하면 될 것 같습니다.

 

그럼,

   공유합니다.

 

 

 

 

(사족)

더 좋은 정보를 공유하도록 저에게 힘을 실어 보내주세요.

그런 의미에서 커피 한잔 사주실래요 ^^

=> https://www.buymeacoffee.com/openbini

=> bit.ly/4aNLPWI

 

 

그럼,

    정보 공유합니다.

 https://freenanum.github.io/Market/#/