RTK Query设置credentials:include后后续请求未携带Cookie问题

问题背景 #

我在使用Redux-Toolkit (RTK) Query时，已经为fetchBaseQuery配置了credentials: "include"来让请求携带Cookie，配置代码如下：

const baseQuery = fetchBaseQuery({
  baseUrl: `${import.meta.env.VITE_SERVER}`,
  prepareHeaders(headers) {
    return headers;
  },
  credentials: "include",
});

export const baseApi = createApi({
  baseQuery: baseQuery,
})

登录POST请求后，服务器返回的响应头包含Set-Cookie字段：

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:5173
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Set-Cookie
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
Set-Cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0Yzg4OTU1YWUxODgwZjJmYzM1NmNjMSIsImlhdCI6MTY5MDg2NTIyMiwiZXhwIjoxNjkwODY2MTIyfQ.X_jNxlInBjaIkqevoaryDYDxSC15Qc9YBNjgdM9XpOs; Path=/; HttpOnly; Secure; SameSite=None
Content-Type: application/json; charset=utf-8
Content-Length: 308
Connection: keep-alive
Keep-Alive: timeout=5

但后续所有请求都没有携带Cookie，示例请求头如下：

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: vi-VN,vi;q=0.9,fr-FR;q=0.8,fr;q=0.7,en-US;q=0.6,en;q=0.5
Connection: keep-alive
DNT: 1
Host: localhost:3000
Origin: http://localhost:5173
Referer: http://localhost:5173/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site

原因分析 #

从返回的Set-Cookie属性来看，核心问题出在**Secure标记**：

• Secure属性要求Cookie只能通过HTTPS协议传输，但你的前端运行在http://localhost:5173（HTTP协议）下，浏览器会直接忽略这个Cookie，不会存储到本地，自然后续请求也无法携带。
• 另外SameSite=None必须配合Secure使用，但本地HTTP环境下Secure不生效，导致整个Cookie的存储逻辑失效。

解决步骤 #

1. 本地开发环境临时调整Cookie配置 #

修改服务器端的Set-Cookie输出，去掉Secure属性，或者仅在生产环境（HTTPS）下添加Secure：

// 示例：Express服务器中根据环境配置Cookie
res.cookie('token', token, {
  path: '/',
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 仅生产环境启用Secure
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax'
});

2. 验证fetchBaseQuery配置有效性 #

确认credentials: "include"确实被正确应用：

• 检查baseUrl是否和请求的服务器地址完全匹配（包括端口），避免跨域配置不一致。
• prepareHeaders方法没有修改或移除credentials相关配置（你的当前代码没问题，只是返回headers，不会影响）。

3. 可选：本地启用HTTPS #

如果需要在本地测试SecureCookie，可以给前端项目启用HTTPS：

• Vite项目可以通过vite.config.js配置：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    https: true
  }
});

启动后前端地址变为https://localhost:5173，此时服务器返回的SecureCookie就能被正确存储。

内容的提问来源于stack exchange，提问作者VN-Boy