상황

express 로 서버를 만들고 react 로 통신을 하던 중, 사용자가 로그인하면 백엔드에서 세션 쿠키를 발행하여 프론트엔드로 전송해야하는 상황이 있었다. 이후 API 요청까지 잘 이루어졌으나 이후의 요청에서, 서버가 사용자를 인증하지 못하는 문제가 발생했다. 서버 로그를 확인해 보니 req.cookies가 예상과 다르게 비어있었다.

cookie가 왜 null로 올까?

cookie가 null로 나타나는 이유는 req.cookies가 빈 상태인 것과 관련이 있을 수 있다. 이는 특히 웹 개발에서 CORS (Cross-Origin Resource Sharing) 설정과 withCredentials 옵션의 활용 방식에 따라 달라질 수 있다. 여기에서 axios를 사용한 HTTP 요청에서 withCredentials 옵션이 중요한 역할을 한다. 자세히 살펴보자.

클라이언트 사이드: Axios 사용 예시

아래는 클라이언트 사이드에서 axios를 사용하여 요청을 보내는 예시이다. 이 경우 withCredentials 설정이 빠져 있어서, CORS 환경에서 서버로 쿠키를 전송하지 않게 된다.

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

서버 사이드: Express.js 사용 예시

서버 사이드에서는 CORS 헤더 설정이 쿠키를 수락하지 않도록 구성되어 있을 수 있다. 다음은 Express.js를 사용한 간단한 서버 설정 예시이다.

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');

const app = express();

// CORS 및 쿠키 파서 미들웨어 설정
app.use(cors()); // 기본 CORS 설정 사용 (쿠키 허용하지 않음)
app.use(cookieParser());

app.get('/data', (req, res) => {
  console.log(req.cookies);  // 쿠키가 정상적으로 전달되지 않아 undefined 로 출력될 수 있음
  res.json({ message: "This is a response from the server." });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

문제의 원인

위 서버 코드에서 cors()는 기본 설정을 사용하여 초기화한다. 기본 CORS 설정은 Access-Control-Allow-Credentials를 false로 설정하고, Access-Control-Allow-Origin을 설정하지 않는다. 이로 인해 브라우저는 보안 정책을 준수하며 서버로부터 받은 쿠키를 저장하지 않고, 서버로 쿠키를 전송하지도 않는다.

해결 방법

클라이언트 코드에서 쿠키를 포함시키기 위해서는 withCredentials를 true로 설정해야 하며, 서버에서는 적절한 CORS 헤더를 설정해야 한다.

// 클라이언트 
axios.get('https://api.example.com/data', { withCredentials: true })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 서버
app.use(cors({
  origin: 'http://localhost:5173',
  credentials: true
}));

CORS는 다른 도메인의 웹 리소스를 요청할 때 보안상의 이유로 기본적으로 브라우저에서 인증 정보를 포함하지 않는 설정이 적용된다. 즉, 다른 도메인의 서버에서 응답으로 온 쿠키나 인증 토큰을 브라우저가 자동으로 요청에 포함하지 않는다. 이것은 보안 문제를 방지하기 위한 것이며, 기본적으로 브라우저의 동작 방식이다.

그러나, 만약 서버와 클라이언트 간에 CORS를 허용하고 인증 정보 (예: 쿠키)를 요청과 응답에서 주고 받고자 한다면, axios 또는 XMLHttpRequest와 같은 HTTP 클라이언트에서 withCredentials 옵션을 활성화해야 한다. 이 옵션을 활성화하면 브라우저가 인증 정보를 요청 헤더에 포함하고, 서버에서 인증 정보를 요청에 허용하도록 설정되어 있어야 한다.

사실 웹 개발을 할 입문할 때 초기에 알아뒀던 정보였는데, 오랜만에 생각이 나서 다시 정리해본다.