RTK Query发请求时服务端cookies为[Object: null prototype]报错

cookies = [Object: null prototype]是Node.js服务打印无原型空对象的提示，不是框架抛出的原生错误，触发的根本原因有两个：

• 服务端未配置Cookie解析中间件。Express类的Node服务默认不会自动解析请求头携带的Cookie字段，未做解析时req.cookies就是一个无原型的空对象，打印时就会出现上述提示，你无法从这个对象里读到请求携带的任何Cookie值。
• 前后端跨域配置存在多处错误，导致浏览器拦截了带凭证的请求，Cookie根本没有正常发送到服务端：
  • 前端错误将CORS响应头作为请求头设置：Access-Control-Allow-Origin、Access-Control-Allow-Credentials是服务端返回响应时需要配置的头，在前端请求头里加这两个字段没有任何作用，反而可能触发跨域预检请求异常。
  • 前后端配置的允许源协议不匹配：前端代码里写的源是https://localhost:3000，后端CORS配置里的允许源是http://localhost:3000，本地React开发服务默认使用HTTP协议，源不匹配时带凭证的跨域请求会被浏览器直接拦截。
  • 跨域带凭证的配置不闭环：前端已经配置credentials: "include"要求请求携带Cookie，但如果服务端没有正确返回匹配的CORS头，浏览器不会将响应交给业务层处理。

按以下顺序调整配置即可解决：

1. 服务端安装并注册Cookie解析中间件
   先安装依赖：

   npm install cookie-parser
   

   在服务端入口文件（就是你贴的index.js）中，在CORS配置之后、路由注册之前引入并使用中间件：

   const cookieParser = require('cookie-parser');
   const cors = require('cors');
   
   app.use(cors({credentials: true, origin: ["http://localhost:3000"]}));
   // 新增这行
   app.use(cookieParser());
   
   // 后面再写app.use(express.json())、路由注册等逻辑
   

2. 修正前端请求配置，删除无效的CORS请求头
   修改fetchBaseQuery里的prepareHeaders逻辑，删掉错误的头设置：

   prepareHeaders: (headers) => {
     const token = localStorage.getItem("token");
     if (token) {
       headers.set("authorization", `Bearer ${token}`);
     }
     // 删除以下两行错误配置，CORS头由服务端返回，不需要前端在请求里设置
     // headers.set("Access-Control-Allow-Origin", "https://localhost:3000");
     // headers.set("Access-Control-Allow-Credentials", "true");
     return headers;
   },
   

3. 统一前后端源配置
   检查前端项目的REACT_APP_API_URL环境变量，确保请求的后端地址和实际启动的后端服务地址一致；如果本地前端确实跑在HTTP 3000端口，保持后端CORS配置里的源为http://localhost:3000即可，不要随意改协议为HTTPS。

额外提醒：如果后续需要传文件设置multipart/form-data类型的请求头，不要手动在headers里写死这个值，否则会丢失自动生成的boundary参数导致文件解析失败，交给浏览器自动设置请求头即可。

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