[typescript] Axios를 사용하여 쿠키 및 헤더 설정하기

22 Dec 2023

typescript

Axios는 TypeScript 및 JavaScript에서 가장 널리 사용되는 HTTP 클라이언트 라이브러리 중 하나입니다. 이 라이브러리를 사용하면 서버와의 통신에 관련된 다양한 작업을 수행할 수 있습니다. 이 포스트에서는 Axios를 사용하여 TypeScript에서 쿠키 및 헤더를 설정하는 방법에 대해 알아보겠습니다.

Axios 및 TypeScript 프로젝트 설정

먼저 프로젝트에 Axios를 설치합니다.

npm install axios

그리고 TypeScript 프로젝트에서 TypeScript의 타입 정의를 설치합니다.

npm install @types/axios

쿠키 설정

Axios를 사용하여 HTTP 요청을 보낼 때 쿠키를 설정하려면 withCredentials 속성을 true로 설정해야 합니다.

예를 들어, 요청을 보낼 때 쿠키를 포함하려면 다음과 같이 작성할 수 있습니다.

import axios, { AxiosRequestConfig } from 'axios';

const config: AxiosRequestConfig = {
  url: 'https://example.com/api',
  method: 'get',
  withCredentials: true
};

axios(config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

헤더 설정

헤더를 설정하려면 Axios 요청의 headers 속성을 사용합니다.

예를 들어, 사용자 토큰을 헤더에 추가하여 요청을 보내려면 다음과 같이 작성할 수 있습니다.

import axios, { AxiosRequestConfig } from 'axios';

const config: AxiosRequestConfig = {
  url: 'https://example.com/api',
  method: 'get',
  headers: {
    Authorization: 'Bearer your_token_here'
  }
};

axios(config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

마치며

이렇게 하여 Axios를 사용하여 TypeScript에서 쿠키 및 헤더를 설정하는 방법에 대해 알아보았습니다. 위의 방법을 참고하여 서버와의 효율적인 통신을 수행할 수 있습니다.

더 많은 정보를 원하시면 Axios 공식 문서를 참고하세요.