使用RTK fetchBaseQuery与CORS时浏览器未设置Cookie问题

针对你遇到的响应头存在Set-Cookie但浏览器不存储的情况，按以下步骤排查修复：

1. 检查secure属性与前端环境的匹配性 #

你的Cookie配置中secure: true，这要求Cookie只能在HTTPS协议下被存储和传输。如果是本地开发环境（比如用http://localhost），浏览器会直接忽略这个Cookie。

• 修复方案：
  • 本地开发时，将secure改为false，或者配置前后端都使用HTTPS（比如用mkcert生成本地证书）。
  • 生产环境保持secure: true即可。
    修改后的cookieOptions示例：

  cookieOptions: {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production', // 生产环境才开启
      sameSite: 'none',
      path: '/',
    } as CookieOptions,
  

2. 确认CORS的origin配置精确无误 #

Express的CORS配置中origin必须是精确匹配前端的完整地址，包括协议、域名和端口号。比如前端是http://localhost:3000，就不能只写http://localhost。

• 检查process.env.APP_BASE_URL的值是否完全正确，比如有没有遗漏端口，协议是否和前端一致。
• 如果需要支持多个环境，可以用数组配置允许的源：

  app.use(cors({ 
    origin: [process.env.APP_BASE_URL, 'http://localhost:3000'], 
    credentials: true 
  }));
  

3. 确保SameSite: None的配置逻辑正确 #

当sameSite设为none时，必须同时满足secure: true（生产环境HTTPS下），否则浏览器会拒绝存储Cookie。另外，部分旧版本浏览器对SameSite: None的支持有问题，不过现在主流浏览器都已支持。

4. 优化登录请求的请求头配置 #

虽然你在fetchBaseQuery中设置了credentials: 'include'，但登录请求时sessionStorage.getItem('accessToken')大概率为null，这会导致Authorization头被设为Bearer null，建议在prepareHeaders中做判断避免无效头：

prepareHeaders: headers => {
  const token = sessionStorage.getItem('accessToken');
  if (token) {
    headers.set('Authorization', `Bearer ${token}`);
  }
  headers.set('Content-Type', 'application/json');
  headers.set('Accept', 'application/json');

  return headers;
},

5. 补充domain属性（如果前后端域名不同） #

如果前后端域名不一致（比如前端是example.com，后端是api.example.com），需要在cookieOptions中添加domain属性，指定Cookie的生效域名：

cookieOptions: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'none',
    path: '/',
    domain: '.example.com', // 前缀的点适配子域名场景
  } as CookieOptions,

按以上步骤逐一排查，基本可以解决Cookie不存储的问题。

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