[ 간단 정리] HTTP 요청에서 withCredentials or credentials 옵션에 관한 정리

  withCredentials

서로 다른 도메인 간에 쿠키와 같은 인증 정보를 전송할 수 있도록 해주는 옵션

withCredentials 옵션은 웹 브라우저에서 XMLHttpRequest 또는 Axios,  Fetch API를 사용하여 서버로 HTTP 요청을 보낼 때 사용되는 옵션입니다. 이 옵션은 주로 Cross-Origin 요청 시 보안 및 인증 관련 상황에서 활용됩니다.

Cross-Origin 요청은 웹 페이지의 도메인이 다른 서버로 HTTP 요청을 보내는 것을 말합니다. 브라우저는 보안상의 이유로 기본적으로 Cross-Origin 요청에서는 다른 도메인으로 쿠키와 같은 인증 정보를 포함시키지 않습니다. 이것은 외부 사이트가 사용자의 개인 정보를 가져가는 것을 방지하기 위한 보안 조치입니다.

 

하지만 때로는 Cross-Origin 요청에서도 쿠키나 인증 토큰 등의 인증 정보를 전달해야 하는 경우가 있습니다. 이때 withCredentials 옵션을 사용할 수 있습니다. 이 옵션을 활성화하면 브라우저는 Cross-Origin 요청에서도 쿠키와 같은 인증 정보를 전송하게 됩니다. 서버 측에서는 이러한 인증 정보를 받아서 처리할 수 있습니다.

예를 들어, 웹 애플리케이션이 사용자의 로그인 상태를 유지하고 있고 다른 도메인의 API 서버로 요청을 보내야 하는 경우, withCredentials 옵션을 활성화하여 인증 정보를 전달할 수 있습니다.

 

 axios와  JavaScript의 Fetch API에서 credentials 옵션을 사용하는 예시

const axios = require('axios');

axios.get('https://api.example.com/data', {
  withCredentials: true // withCredentials 활성화
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include' // 이 옵션으로 withCredentials 활성화
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

 

  XMLHttpRequest에서 withCredentials 옵션을 사용하는 예시

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.withCredentials = true; // withCredentials 활성화
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

이처럼 withCredentials 옵션은 Cross-Origin 요청에서 인증 정보를 전달할 수 있게 해주는 중요한 기능이지만, 괜히 교차 출처 간에 접근을 막아둔 것이 아니기 때문에 신중하게 사용해야 합니다.