[typescript] 타입스크립트에서 Axios를 이용하여 크로스 도메인 요청 처리하기
타입스크립트(TypeScript)로 웹 애플리케이션을 개발할 때 API 요청을 보내야 하는 경우가 많습니다. 이때 Axios를 사용하여 API 요청을 처리하면 보다 효율적으로 작업을 수행할 수 있습니다. 하지만 웹 애플리케이션을 개발하다 보면 보안상의 이유로 서로 다른 도메인으로의 요청, 즉 크로스 도메인 요청을 할 때가 있습니다. 이때 Axios를 어떻게 사용하여 크로스 도메인 요청을 처리할 수 있는지 알아보겠습니다.
Axios와 함께 JSONP 사용하기
JSONP(JSON with Padding)는 서버와의 크로스 도메인 요청을 가능하게 하는 방법 중 하나입니다. 이를 Axios와 함께 사용하여 크로스 도메인 요청을 처리할 수 있습니다.
import axios from 'axios';
function fetchCrossDomainData(url: string) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
const callbackName = `jsonp_callback_${Date.now()}`;
script.src = `${url}?callback=${callbackName}`;
window[callbackName] = (data: any) => {
resolve(data);
document.body.removeChild(script);
delete window[callbackName];
};
document.body.appendChild(script);
});
}
const apiUrl = 'https://example.com/api';
fetchCrossDomainData(apiUrl)
.then((data) => {
console.log(data);
})
.catch((error) => {
console.error(error);
});
axios-jsonp 사용하기
또 다른 방법으로는 axios-jsonp 패키지를 사용하는 것입니다. axios-jsonp는 Axios와 JSONP를 결합한 패키지로, 간편하게 크로스 도메인 요청을 처리할 수 있도록 도와줍니다.
우선 axios-jsonp를 설치합니다.
npm install axios-jsonp
그런 다음, 다음과 같이 axios-jsonp를 활용하여 크로스 도메인 요청을 할 수 있습니다.
import axiosJsonp from 'axios-jsonp';
axiosJsonp({url: 'https://example.com/api'})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.error(error);
});
마치며
Axios를 사용하여 타입스크립트 애플리케이션에서 크로스 도메인 요청을 처리하는 방법을 알아보았습니다. JSONP를 직접 다루거나 axios-jsonp와 같은 패키지를 사용하여 간편하게 크로스 도메인 요청을 처리할 수 있습니다. 이를 통해 보다 다양한 환경에서 안전하고 효과적으로 API 요청을 관리할 수 있게 될 것입니다.