tRPC服务端无法接收客户端请求Cookie问题求助

核心问题分析 #

客户端（localhost:3000）与服务端（localhost:2022）因端口不同被浏览器判定为不同源，而你设置的Cookie为SameSite=Lax——该模式仅允许同站请求或安全跨站GET请求携带Cookie，tRPC默认使用POST请求发起调用，因此浏览器不会自动将Cookie传递到服务端。

具体解决方案 #

1. 调整Cookie的SameSite与Secure属性 #

将Cookie的SameSite从Lax改为None，同时必须添加Secure属性（这是SameSite=None的强制要求）：

• 若通过服务端设置Cookie，修改响应头配置：

// 服务端设置Cookie示例（根据实际框架调整）
res.setHeader('Set-Cookie', [
  'your-cookie-key=xxx; HttpOnly; SameSite=None; Secure; Path=/; Domain=localhost'
]);

• 本地开发注意：若使用HTTP而非HTTPS，浏览器会拒绝带Secure属性的Cookie，需临时开启Chrome调试选项：
  1. 打开chrome://flags/#allow-insecure-localhost
  2. 启用「允许不安全的本地主机」并重启浏览器

2. 确认CORS配置完整性 #

你已配置origin: 'http://localhost:3000'和credentials: true，这部分正确。若仍有问题，可显式指定允许的请求头：

cors({
  origin: 'http://localhost:3000',
  credentials: true,
  allowedHeaders: ['Cookie', 'Content-Type'] // 显式允许Cookie相关请求头
})

3. 验证客户端fetch配置 #

你已在httpBatchLink中添加credentials: 'include'，需确保没有其他链路或全局拦截器覆盖该配置。若使用React等框架，检查是否有全局fetch逻辑修改了请求参数。

4. 修正服务端代码笔误 #

你的createContext代码存在语法错误：le user = null;应改为let user = null;，虽不影响Cookie传递，但会导致后续代码报错。

验证步骤 #

1. 重新设置Cookie并重启服务端
2. 客户端发起tRPC调用后，查看服务端req.headers是否包含小写的cookie字段（HTTP头名称通常为小写）
3. 打开浏览器开发者工具「网络」面板，检查tRPC请求的「请求头」是否携带Cookie，同时确认「响应头」的Set-Cookie配置符合要求

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