Axios는 자바스크립트에서 HTTP 요청을 보내는 라이브러리로, 간편한 사용법과 널리 사용되는 기능들을 제공합니다. 헤더는 HTTP 요청과 응답에서 메타데이터를 전달하는 역할을 합니다. Axios에서 헤더를 설정하는 방법을 살펴보겠습니다.

Axios 설치하기

먼저, Axios를 사용하기 위해 해당 라이브러리를 설치해야 합니다. npm을 사용한다면 다음 명령어를 사용하여 설치합니다.

npm install axios

헤더 설정하기

Axios를 사용해 HTTP 요청을 보낼 때 헤더를 설정하려면 headers 객체를 사용합니다. 다음은 간단한 예제 코드입니다.

import axios from 'axios';

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 Axios를 사용하여 GET 요청을 보내고 있습니다. headers 객체에는 헤더의 키와 값이 들어있습니다. 위의 코드에서는 Authorization 헤더에 Bearer token123 값을, Content-Type 헤더에 application/json 값을 설정하였습니다.

Axios를 사용하여 POST, PUT, DELETE 등의 다른 요청을 보낼 때도 동일한 방식으로 헤더를 설정할 수 있습니다.

기본 헤더 설정하기

Axios를 사용하여 여러 요청을 보낼 때마다 동일한 헤더를 설정하는 경우, 기본 헤더를 설정해두면 편리합니다. 다음은 Axios에서 기본 헤더를 설정하는 방법입니다.

import axios from 'axios';

axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.headers.post['Content-Type'] = 'application/json';

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

위의 예제에서는 axios.defaults.headers 객체를 사용하여 기본 헤더를 설정하고 있습니다. 이제 GET 요청을 보낼 때마다 Authorization과 Content-Type 헤더가 설정되어 전송될 것입니다.

정리

Axios를 사용하여 헤더를 설정하는 방법에 대해 알아보았습니다. 헤더는 HTTP 요청과 응답에서 중요한 역할을 수행하므로, 올바르게 설정하는 것이 중요합니다. Axios는 편리하고 강력한 기능을 제공하여 HTTP 통신을 보다 쉽게 처리할 수 있도록 도와줍니다.

참고 자료:

• Axios 공식 문서
• MDN - HTTP 헤더