[지은] 네가 구운 쿠키~🍪🎵 나는 저장 못하지 (Cross origin에서 쿠키 다루기) - boostcampwm2023/web04-ALGOCEAN GitHub Wiki

문제 상황

클라이언트 개발 환경에서 쿠키가 정상적으로 저장되지 않는 문제가 발생했다.

클라이언트의 실 배포 origin과 개발 환경에서의 origin이 달라서 발생한 문제.

  • 개발 환경에서의 origin : localhost:5173
  • 실 배포 환경 origin : algocean.site

브라우저는 기본적으로 cross origin에 대한 쿠키를 받지 않는다.

따라서 서버에서 정상적으로 cookie를 보내줘도 개발 환경의 브라우저에서 cookie가 정상적으로 저장되지 않았다.

문제 해결

1차 해결 방법 : Credential 설정 적용

Cross origin에 대한 쿠키 전송을 허용해주어야 했다. Client 및 Server의 http header에 다음과 같은 설정을 추가해주었다.

Client

axios options에 다음과 같은 값 추가

  • withCredential : true

Server

http response header에 다음과 같은 값 추가

  • Access-Control-Allow-Credentials : true
  • Access-Control-Allow-Origin : 와일드카드가 아닌 정확한 URL 명시 http://localhost:5173

2차 해결 방법 : 클라이언트 프록시 적용

1차 방법을 적용해 무사히 브라우저에 쿠키가 전달되도록 했지만, 브라우저는 origin이 다른 쿠키는 아에 저장을 하지 않는다는 또다른 문제를 마주했다.

강제로 브라우저에게 request origin과 response origin이 같다고 속이기 위해

VITE의 proxy 기능을 이용했다.

Proxy 동작 원리

피그마 원본 링크

실제 적용

개발 환경에서는 axios의 baseURL을 algocean.site가 아닌 localhost:5173으로 변경

import axios from 'axios';
const { VITE_BASE_URL, DEV } = import.meta.env;

**const baseURL = DEV ? '' : VITE_BASE_URL;**

export const client = axios.create({
  **baseURL: baseURL,**
  withCredentials: true,
});

결과

개발 환경에서도 정상적으로 cookie가 저장된 것을 확인할 수 있었다 🍪 image