[TIL] 프론트엔드, 백엔드 도메인이 다를 때 쿠키 설정

프로젝트에서 쿠키를 설정하면서 발생했던 문제 및 해결 방법을 기록한다.

 

 

 

1. 로컬 환경에서 서로 다른 도메인 간 쿠키 사용하기 - proxy 사용

 

도메인 - localhost, http://ec2-.xxx.com

 

proxy를 사용하기 전에는 쿠키 도메인이 백엔드 도메인으로 세팅이 되어서 새로고침 시 쿠키가 삭제되고, 서버에서도 내가 보낸 쿠키를 읽을 수 없는 오류가 있었다. 로컬 환경에서는 proxy를 사용하여 동일한 도메인에서 요청한 것처럼 동작하게 할 수 있다.

 

 

proxy를 설정할 수 있는 setup 파일에서 proxy 설정을 추가한다.

vite.config.js

import react from '@vitejs/plugin-react-swc';
import { defineConfig, loadEnv } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [react(), svgr()],
    server: {
      host: '0.0.0.0',
      port: 3000,
      ...(mode === 'development'
        ? {
            proxy: {
              '/api': {
                target: env.VITE_API_ROOT,
                changeOrigin: true,
              },
            },
          }
        : {}),
    },
    resolve: {
      alias: {
        '@': '/src',
      },
    },
  };
});

 

 

proxy 설정 후, 쿠키 도메인이 localhost로 설정되면서 쿠키를 정상적으로 저장하고 요청에 사용할 수 있었다.

 

 

 

 

2. 배포 환경에서 서로 다른 도메인 간 쿠키 사용하기 - 하위 도메인 통일, CORS 설정

 

도메인 - https://dev.xxx.com, https://dev-api.xxx.com

 

 

프로덕션에서는 proxy로는 문제를 해결할 수 없다. proxy를 사용하기 전과 같은 문제가 발생했다. 프로덕션에서는 프론트엔드와 백엔드의 하위 도메인을 맞추어야 쿠키 공유가 가능하다. 하지만 도메인을 맞추었는데도 새로고침 시 쿠키가 사라지고, 특정 요청에서만 서버에 쿠키가 제대로 전송되지 않는 문제가 있었다.

 

알고 보니 axios interceptor에서 토큰 재발급을 요청하는 부분에 문제가 있었다. 토큰 재발급에는 구현해 둔 instance가 아닌 기본 axios instance를 사용하고 있었는데 withCredentials 옵션이 누락된 게 원인이었다. 로컬 환경에서는 proxy가 적용되어서 누락된 부분이 쿠키 사용에 영향을 미치지 않아 알아채지 못했다.

 

api.ts

const { data } = await axios.get('/auth/reissue', {
  baseURL: BASE_URL,
  withCredentials: true, // 누락되었던 부분
});

 

빠진 부분을 추가해 주니 정상적으로 쿠키를 사용할 수 있었다. 쿠키를 사용한다면 반드시 withCredentials 설정을 포함하자.