AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지에서 비동기적으로 데이터를 전송하고 받을 수 있는 기능을 제공합니다. AJAX를 사용하면 웹 페이지를 새로고침하지 않고도 서버에 데이터를 요청하거나 업데이트할 수 있습니다.

AJAX 요청을 보낼 때, 헤더는 요청에 대한 추가 정보를 제공하는 역할을 합니다. 이 포스트에서는 자바스크립트를 사용하여 AJAX 요청 헤더를 설정하는 방법에 대해 알아보겠습니다.

XMLHttpRequest 객체를 사용한 AJAX 요청

가장 일반적인 방법으로 AJAX 요청을 보내는 것은 XMLHttpRequest 객체를 사용하는 것입니다. 다음은 XMLHttpRequest 객체를 생성하고, GET 요청을 보내는 예제 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer <token>');

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Error:', xhr.status);
    }
  }
};

xhr.send();

위의 예제에서 setRequestHeader 메서드를 사용하여 헤더를 설정합니다. 첫 번째 매개변수에는 헤더 이름을, 두 번째 매개변수에는 헤더 값으로 지정할 문자열을 입력합니다. 위의 코드에서 Content-Type 헤더는 요청 본문의 타입을 application/json으로 설정하고, Authorization 헤더는 토큰 값을 포함하여 보낸 것을 볼 수 있습니다.

Fetch API를 사용한 AJAX 요청

ES6부터 도입된 Fetch API는 Promise 기반의 더 간편한 방법으로 AJAX 요청을 처리할 수 있도록 도와줍니다. Fetch API를 사용하여 AJAX 요청을 보낼 때, 헤더 설정은 Headers 객체를 사용하여 할 수 있습니다. 다음은 Fetch API를 사용하여 GET 요청을 보내고, 헤더를 설정하는 예제 코드입니다.

var url = 'https://api.example.com/data';
var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer <token>');

fetch(url, {
  method: 'GET',
  headers: headers
})
.then(function(response) {
  if (response.ok) {
    return response.json();
  }
  throw new Error('Error:', response.status);
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.error(error);
});

위의 예제에서 Headers 객체를 사용하여 헤더를 생성하고, append 메서드를 사용하여 헤더를 추가합니다. 헤더를 설정한 후에는 Fetch API의 fetch 함수를 사용하여 요청을 보냅니다. fetch 함수는 Promise를 반환하므로, then 메서드를 사용하여 응답 데이터를 처리할 수 있습니다.

Axios 라이브러리를 사용한 AJAX 요청

Axios는 자바스크립트의 또 다른 AJAX 라이브러리로, Axios를 이용하면 훨씬 간편하게 AJAX 요청을 처리할 수 있습니다. Axios는 자체적으로 AJAX 요청 헤더 설정을 지원합니다. 다음은 Axios를 사용하여 GET 요청을 보내고, 헤더를 설정하는 예제 코드입니다.

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

Axios를 사용하여 AJAX 요청을 보낼 때, get, post, put, delete 등의 메서드를 사용하여 요청을 처리할 수 있습니다. 두 번째 매개변수로는 객체를 전달하는데, 이 객체의 headers 속성에 헤더를 설정합니다.

이상으로 자바스크립트에서 AJAX 요청 헤더를 설정하는 방법에 대해 알아보았습니다. AJAX 요청을 보낼 때 필요한 추가적인 헤더가 있다면, 위의 예제 코드를 참고하여 적절히 설정하시기 바랍니다.