生产环境下React应用浏览器Cookie无法设置Token问题排查

问题背景 #

你开发的React应用在本地可通过js-cookie正常将Token写入Cookie，但部署到Google Cloud Provider（前后端Docker分离）后，生产环境下浏览器无法成功设置Cookie。已确认后端返回Token正常，调整过secure、sameSite属性，域名匹配正确。

具体排查与修复方案 #

1. 显式指定Cookie的Path属性 #

当前代码设置Cookie时未指定path，默认会绑定当前页面的路由路径（比如前端部署在https://xxx.com/app，Cookie仅在/app路径下有效）。必须显式设置path: "/"，确保整个域名下都能访问Cookie：

const setToken = (token) => {
  Cookies.set("accessToken", token, {
    path: "/",
    secure: true, // 生产环境HTTPS必须开启
    sameSite: "Lax" // 避免Strict导致跨域场景下Cookie无法传递
  });
  console.log("accessToken", token);
};

const deleteCookie = (name) => {
  // 删除时必须匹配设置时的所有属性，否则无法删除目标Cookie
  Cookies.remove(name, { path: "/", secure: true, sameSite: "Lax" });
};

2. 强制开启Secure属性 #

GCP生产环境必然是HTTPS协议，现代浏览器在HTTPS环境下会直接拒绝设置不带secure属性的Cookie（localhost除外）。之前你注释掉了secure: true，必须重新开启，否则Cookie会被浏览器拦截。

3. 配置跨域（CORS）的Credentials支持 #

前后端Docker分离部署属于跨域场景，必须同时配置前后端允许携带Credentials：

• 后端Spring Boot配置：
  在CORS配置类中添加allowCredentials(true)，且必须指定具体的前端Origin（不能用*，否则allowCredentials不生效）：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("https://你的前端域名.com") // 替换为实际前端域名
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowCredentials(true) // 关键：允许请求携带Cookie
                  .maxAge(3600);
      }
  }
  

• 前端RTK Query配置：
  创建API时必须设置credentials: 'include'，确保请求时携带Cookie：

  import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
  
  export const authApis = createApi({
      reducerPath: 'authApis',
      baseQuery: fetchBaseQuery({
          baseUrl: 'https://你的后端域名.com', // 替换为实际后端域名
          credentials: 'include' // 允许携带Cookie
      }),
      endpoints: (builder) => ({
          login: builder.mutation({
              query: (credentials) => ({
                  url: '/login',
                  method: 'POST',
                  body: credentials
              })
          }),
          logout: builder.mutation({
              query: () => ({
                  url: '/logout',
                  method: 'POST'
              })
          })
      })
  });
  

4. 检查GCP负载均衡/CDN配置 #

如果应用使用了GCP的负载均衡或CDN服务，需确认：

• 负载均衡是否允许转发Cookie，未被缓存策略拦截；
• CDN是否配置了正确的Cookie传递规则，避免Cookie被修改或丢弃。

5. 浏览器DevTools直接排查 #

打开Chrome开发者工具：

1. 进入Application > Cookies，查看是否存在accessTokenCookie，或是否被标记为Blocked；
2. 查看Console面板，是否有Cookie被拦截的警告信息（比如SameSite不匹配、Secure属性缺失等），这些信息会直接指明失败原因。

原代码参考 #

import { createSlice } from "@reduxjs/toolkit";
import { authApis } from "./authApis";
import Cookies from "js-cookie";

const initialState = {
  token: Cookies.get("accessToken") || null,
  isLoggedIn: !!Cookies.get("accessToken"),
  successMessage: "Logeed in",
  errorMessage: "",
};

const setToken = (token) => {
  Cookies.set("accessToken", token, {
    // sameSite: "Strct",
    // secure: true,
  });
  console.log("accessToken", token);
};

const deleteCookie = (name) => {
  Cookies.remove(name, { path: "/" /*sameSite: "Strict"*/ });
};

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      authApis.endpoints.login.matchFulfilled,
      (state, action) => {
        const { token } = action.payload;
        state.token = token;
        state.isLoggedIn = true;
        console.log("token", token);
        setToken(token);
        //below everything is consoling
        console.log("Token retrieved:", state.token);
        console.log("Token Get set", Cookies.get("accessToken"));
      }
    );
    builder.addMatcher(
      authApis.endpoints.logout.matchFulfilled,
      (state, action) => {
        state.token = null;
        state.isLoggedIn = false;
        deleteCookie("accessToken");
        deleteCookie("roles");
        deleteCookie("isAdminView");
        console.log("Logout successful:", action.payload);
      }
    );
  },
});

export default authSlice.reducer;

内容的提问来源于stack exchange，提问作者Annappa Gowda