인터넷에서는 보안 상의 이유로, 다른 도메인 간에 자바스크립트를 통해 쿠키에 접근하는 것을 제한합니다. 이를 Cross-Origin Resource Sharing (CORS)라고 합니다. 하지만, CORS 정책을 설정하고 적절히 사용하면 다른 도메인의 쿠키를 읽고 쓸 수 있는 방법이 있습니다.

1. 서버 측에서 CORS 정책 설정

서버 측에서 CORS를 허용하기 위해서는 응답 헤더에 Access-Control-Allow-Origin 값을 설정해야 합니다. 이 헤더를 사용하면 특정 도메인에서의 요청만을 허용하도록 할 수 있습니다. 예를 들어, Access-Control-Allow-Origin: https://example.com이라고 설정하면 example.com 도메인에서의 요청만을 허용할 수 있습니다.

서버 측에서는 다음과 같이 응답 헤더를 설정해야 합니다. 이 예제에서는 Express.js를 사용하겠습니다.

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  next();
});

// 라우트 및 기타 응답 처리

2. 클라이언트 측에서 CORS 요청 설정

클라이언트 측에서는 XMLHttpRequest나 fetch API를 사용하여 CORS 요청을 할 때, withCredentials 옵션을 설정해야 합니다. 이 옵션은 쿠키를 함께 보낼 수 있도록 해줍니다.

다음은 fetch API를 사용하여 CORS 요청을 보내는 예제입니다.

fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include',
})
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

위 예제에서 credentials 옵션을 ‘include’로 설정하면, 요청에 쿠키가 포함되어 전송됩니다.

요약

CORS를 이용하여 자바스크립트에서 다른 도메인의 쿠키를 읽고 쓰기 위해서는 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하고, 클라이언트 측에서 CORS 요청을 보낼 때 withCredentials 옵션을 설정해야 합니다. 이렇게 함으로써 다른 도메인 간에 쿠키를 안전하게 공유할 수 있습니다.

#CORS #쿠키