[javascript] Axios를 이용하여 JSONP 요청하기

21 Nov 2023

javascript

Axios는 자바스크립트에서 가장 인기 있는 HTTP 클라이언트 라이브러리 중 하나입니다. 이 라이브러리를 사용하면 쉽게 AJAX 요청을 수행할 수 있습니다. 그 중에서도 JSONP 요청을 처리하는 방법에 대해 알아보겠습니다.

JSONP란?

JSONP는 JSON with Padding의 약자로, AJAX 요청에서 Same-Origin Policy 제약을 우회하기 위한 방법입니다. 일반적인 AJAX 요청은 브라우저 보안 정책으로 인해 동일한 출처(origin)에서만 요청할 수 있지만, JSONP는 스크립트 태그를 사용하여 외부 도메인의 데이터를 받아올 수 있습니다.

Axios를 이용한 JSONP 요청

Axios에서 JSONP 요청을 보내려면 axios-jsonp 라이브러리를 설치해야 합니다. 먼저 패키지 매니저를 사용하여 axios-jsonp를 설치합니다.

npm install axios-jsonp

그리고 Axios에서 JSONP 요청을 하려면 jsonp 함수를 사용합니다. 해당 함수에는 두 개의 인자가 필요합니다. 첫 번째 인자는 API의 URL이고, 두 번째 인자는 옵션 객체입니다.

import axiosJsonp from 'axios-jsonp';

axios.jsonp('https://api.example.com/data', {
  callbackParamName: 'callback',
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서 ‘https://api.example.com/data’는 요청을 보낼 API의 URL입니다. callbackParamName 옵션은 JSONP 요청으로 인식되도록 서버에 전달되는 콜백 함수의 매개변수 이름을 설정합니다. 대부분의 경우 기본값인 ‘callback’을 사용할 수 있습니다.

이제 Axios를 사용하여 JSONP 요청을 쉽게 보낼 수 있습니다. 하지만 JSONP에는 보안상의 이슈가 있으므로, 가능하면 CORS(Cross-Origin Resource Sharing) 등 다른 방법을 사용하는 것이 좋습니다.

JSONP란?

Axios를 이용한 JSONP 요청

참고 자료