자바스크립트 요청 헤더 설정과 인증 처리

10 Sep 2023

javascript

웹 개발에서 자바스크립트는 많은 기능을 제공하며, 서버와의 통신 역시 자바스크립트를 통해 이루어집니다. 이를 위해서는 서버로 요청을 보낼 때 필요한 헤더를 설정하고, 필요한 경우 인증 처리를 해야합니다. 이번 블로그에서는 자바스크립트를 사용하여 요청 헤더를 설정하고 인증을 처리하는 방법을 알아보겠습니다.

XMLHttpRequest를 사용한 요청 헤더 설정

XMLHttpRequest 객체는 자바스크립트에서 서버와 통신하기 위해 주로 사용됩니다. 요청 헤더를 설정하기 위해서는 setRequestHeader 메서드를 사용합니다. 다음은 예시 코드입니다.

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

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

xhr.send();

위 코드에서 setRequestHeader 메서드를 사용하여 Authorization 헤더와 Content-Type 헤더를 설정합니다. 이를 통해 서버로 보낼 데이터의 형식과 인증 정보를 전달할 수 있습니다.

fetch API를 사용한 요청 헤더 설정

fetch API는 XMLHttpRequest보다 새로운, 간편한 방법으로 서버와 통신할 수 있도록 도와줍니다. fetch를 사용하여 요청 헤더를 설정하기 위해서는 두 번째 매개변수로 옵션 객체를 전달해야합니다. 다음은 예시 코드입니다.

fetch("https://api.example.com/data", {
  method: "GET",
  headers: {
    "Authorization": "Bearer <access_token>",
    "Content-Type": "application/json"
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

위 코드에서 headers 속성을 사용하여 Authorization 헤더와 Content-Type 헤더를 설정합니다. fetch API의 then 메서드를 사용하여 응답 데이터를 처리할 수 있습니다.

요청 인증 처리

요청을 보낼 때 서버의 인증을 요구하는 경우, 인증 처리를 해야합니다. 주로 사용되는 인증 방식으로는 JWT (JSON Web Token) 인증이 있습니다. 다음은 JWT 인증을 사용하여 자바스크립트에서 인증 처리하는 방법을 보여주는 예시 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.setRequestHeader("Authorization", "Bearer <access_token>");
xhr.withCredentials = true; // 서버에서 쿠키를 인증에 사용하는 경우

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    } else if (xhr.status === 401) {
      console.error("Unauthorized");
      // 로그인 페이지로 이동하거나 인증 실패 시 다른 처리를 수행
    } else {
      console.error("Error:", xhr.status);
    }
  }
};

xhr.send();

위 코드에서 Authorization 헤더에 JWT 토큰을 설정하고, 필요한 경우 withCredentials 속성을 true로 설정하여 쿠키를 인증에 사용할 수 있습니다. 또한, 서버의 응답 상태 코드에 따라 인증 실패 시 다른 처리를 수행할 수 있습니다.

자바스크립트를 사용하여 요청 헤더를 설정하고 인증 처리를 하는 방법을 알아보았습니다. 이를 통해 보안성을 갖춘 웹 애플리케이션을 개발할 수 있습니다.