Cross-Domain - JSONP 해결방법

AJAX 요청을 할 때 개발자는 종종 다른 도메인에서 데이터를 가져오려고 할 때 문제에 직면합니다. 이는 웹 페이지가 페이지를 제공한 도메인이 아닌 다른 도메인에 요청하는 것을 방지하기 위해 브라우저에서 구현한 보안 조치인 Same-Origin Policy 때문입니다. 그러나 이러한 제한을 극복하고 AJAX를 사용하여 교차 도메인 요청을 하는 방법이 있습니다. 이 게시물에서는 JSONP 기술을 사용하는 AJAX 교차 도메인 설루션의 예를 살펴보겠습니다.

JSONP

JSONP(JSON with Padding)는 Same-Origin Policy를 우회하고 AJAX를 사용하여 도메인 간 요청을 허용하는 데 사용되는 기술입니다. JSONP는 다른 도메인의 URL을 가리키는 src 속성으로 스크립트 태그를 생성하여 작동합니다. 다른 도메인의 서버는 URL에 지정된 콜백 함수에 래핑 된 데이터를 매개변수로 사용하여 JavaScript 함수 호출을 반환해야 합니다. 콜백 함수는 스크립트 태그가 로드될 때 실행되며 함수에 데이터가 전달됩니다.

예제 1

에서 호스팅되는 웹사이트가 있고 에서 http://www.example.com데이터를 가져오기 위해 AJAX 요청을 만들고 싶다고 가정해 보겠습니다 http://www.example-api.com. JSONP를 사용하여 다음을 수행하여 이를 수행할 수 있습니다.

 

1. 응답 데이터를 처리할 콜백 함수를 정의합니다.

function handleResponse(data) { // Handle the data here }

2. 콜백 함수 이름을 매개변수로 사용하여 API URL을 가리키는 src 속성이 있는 스크립트 태그를 생성합니다.

var script = document.createElement('script');
script.src = 'http://www.example-api.com/data?callback=handleResponse';
document.head.appendChild(script);

3. 서버는 http://www.example-api.comURL에 지정된 콜백 함수에 래핑 된 데이터를 매개변수로 사용하여 JavaScript 함수 호출을 반환해야 합니다.

handleResponse({"data": "example data"});

스크립트 태그가 로드되면 콜백 함수가 handleResponse실행되고 데이터가 매개 변수로 함수에 전달됩니다.

 

예제 2

1. jqeury를 이용한 방법

$.ajax({
  url: 'http://www.example-api.com/data',
  dataType: 'jsonp',
  jsonpCallback: 'handleResponse',
  success: function(data) {
    // Handle the data here
  }
});

function handleResponse(data) {
  // Handle the data here
}

결론

JSONP는 AJAX를 사용하여 도메인 간 요청을 만드는 데 유용한 기술입니다. 그러나 오류 처리가 부족하고 GET 요청에서만 작동한다는 사실과 같은 몇 가지 제한 사항이 있습니다. CORS(Cross-Origin Resource Sharing)와 같은 다른 기술은 고급 사용 사례에 사용해야 합니다. 그럼에도 불구하고 JSONP는 AJAX를 사용하여 도메인 간 요청을 만들기 위한 빠르고 쉬운 설루션이 될 수 있습니다.

 

 

- 해당글은 chatGPT를 사용하여 생성된 글입니다.