wrongcache local to server

로컬에서 서버로 요청 시, 요청에 맞지 않는 응답이 오는 현상 해결

문제 상황

로컬에서 서버로 보내는 요청에서 쿠키가 담기지도 않고, 원하는 요청이 오지 않는 문제가 생겼다.

원인 분석

처음에는 쿠키 설정과 관련된 문제인 줄 알았다. 쿠키에 권한이 없어 발생하는 405 에러, 요청에 Cookie 헤더가 비어있는 현상이 보였기 때문이다.

그래서 nginx 부터 nest까지 쿠키 설정, CORS 설정을 다시 체크했고, 해결이 되질 않아 네트워크 탭을 다시 살펴보았다.

(왼쪽 배포된 환경, 오른쪽은 로컬)

네트워크 탭에서 에러가 나는 userInfo 부분은 Cache-Control 헤더가 포함된 것을 알 수 있다.

Cache-Control = public, max-age=31536000

그래서 임시로 아래처럼 에러가 나는 요청에 캐시 사용을 제거해보았다.

frontend/src/shared/lib/auth/guard.ts (79 Line)

try {
    const [tokenResponse, userInfoResponse] = await Promise.all([
      fetch("/api/users/token", {
        headers: {
          "Cache-Control": "stale-while-revalidate",
          Pragma: "no-cache",
        },
        credentials: "include",
      }),
      fetch("/api/users/userInfo", {
        credentials: "include",
        **cache: "no-store", // 캐시 사용 안함!**
      }),
    ]);

설정 이후 요청하니, 올바르게 동작했다.

문제 원인: Vite의 서버 프록시 설정

로컬에서만 캐시가 적용되는 이유를 찾아보니, 로컬에서 서버로 요청을 보낼 때는 vite를 통해 프록시 서버를 거치게 했기 때문이었다.

frontend/vite.config.ts 에 아래와 같은 프록시 서버 설정이 되어있다.

server: {
      port: 3000,
      proxy: {
        "/api": {
          target: env.SOCKET_URL,
          changeOrigin: true,
          secure: false,
          ws: true,
          configure: (proxy) => {
            proxy.on("proxyRes", (proxyRes) => {
              proxyRes.headers["cache-control"] = "public, max-age=31536000";
            });
          },
        },
      },
      middlewareMode: env.NODE_ENV === "development" ? false : true,
    },

31536000 숫자는 개발자 도구에서 확인한 Cache-Control 헤더 내용과 같다. (max-age 31536000은 1년)

Vite의 server.proxy 설정은 로컬 개발 서버에서 백엔드 API 서버로의 요청을 프록시하는 기능을 제공한다.

로컬→서버로 갈때는 위의 프록시 서버를 거치며 캐시 처리가 된다.

cache-control: public, max-age=31536000가 추가되면, 브라우저가 API 응답을 캐시하여 같은 요청에 대해 캐시된 응답을 재사용한다.

이로 인해 로컬 환경에서 API 응답이 캐시되고, 새로운 요청이 있을 때 캐시된 응답을 사용하게 된다.

그럼 왜 요청에 쿠키가 자동으로 담기지 않았을까?

요청에 쿠키가 없길래 당연히 CORS 설정과 연관지어 생각했다. 하지만 쿠키가 담기지 않는 이유는 따로 있었다.

쿠키는 HTTP 요청과 함께 서버로 전송된다. 그런데 캐시된 응답을 사용하면 브라우저가 새로운 HTTP 요청을 만들지 않기 때문에 쿠키가 포함되지 않는다!

즉, 브라우저가 요청을 서버로 보내지 않기 때문에 쿠키가 전송되지 않는다. 쿠키는 서버로의 새로운 요청이 있을 때마다 전송되기 때문에, 캐시된 응답을 사용할 경우에는 쿠키가 포함되지 않는 것이다.