React中JS-Cookie创建的Cookie未携带在Axios请求头无法发送至服务端

你已经正确配置了Axios的withCredentials: true，且后端下发的Cookie可正常携带，手动通过JS-Cookie写入的Cookie无法随请求发送，按以下优先级排查即可：

1. 优先排查Cookie路径/域名配置不匹配（最高频诱因） #

JS-Cookie在未手动指定path和domain属性时，会使用默认值：

• path默认取当前写入Cookie时所在页面的路径，而非全站根路径
• domain默认取当前页面的精确域名，不匹配父域/子域

举个例子：如果你在https://www.xxx.com/user/center页面写入Cookie，默认path为/user，后续请求https://www.xxx.com/api/list接口时，路径/api和Cookie绑定的/user不匹配，浏览器会直接忽略该Cookie，不会加入请求头。

修复代码 #

写入Cookie时显式指定路径为根路径，跨子域场景补充域名配置：

Cookies.set("myCookie", JSON.stringify(myData), {
  expires: 2,
  sameSite: "none",
  secure: true,
  path: "/", // 强制全站路径匹配，所有路径下的请求都会携带该Cookie
  // 若前端和接口为同根域不同子域（如前端是www.xxx.com，接口是api.xxx.com），放开下方配置
  // domain: ".xxx.com"
});

2. 排查本地开发环境Secure属性冲突 #

你给Cookie配置了secure: true，该属性要求Cookie只能在HTTPS协议环境下传输。如果你本地开发使用的是http://localhost/http://127.0.0.1这类HTTP地址，即使Cookie成功写入浏览器存储，发起HTTP请求时浏览器会自动拦截带Secure标记的Cookie，不会加入请求头。

修复代码 #

根据当前访问协议动态配置属性，兼容本地HTTP开发和线上HTTPS环境：

const isHttps = window.location.protocol === "https:";
Cookies.set("myCookie", JSON.stringify(myData), {
  expires: 2,
  sameSite: isHttps ? "none" : "lax",
  secure: isHttps,
  path: "/",
});

如果本地需要测试Secure属性逻辑，直接给本地开发服务配置HTTPS证书即可，不要用HTTP协议访问。

3. 核对跨域CORS凭证配置 #

虽然你可以正常接收后端下发的Cookie，但还是建议核对接口的CORS配置：

• 跨域场景下后端必须返回响应头Access-Control-Allow-Credentials: true
• 对应Access-Control-Allow-Origin不能配置为通配符*，必须为前端页面的精确源地址
  如果部分接口路径没配置上述规则，也会出现Cookie被拦截的情况。

4. 排查Cookie大小/格式超限 #

浏览器对单个Cookie的大小限制通常为4KB左右，你将myData序列化后存入Cookie，如果内容体积超过限制，即使表面写入成功，请求时浏览器也会自动丢弃超限的Cookie。如果存储的数据量较大，不建议存在Cookie中，可调整为其他存储方案，或通过自定义请求头传递参数。

5. 排查第三方Cookie拦截策略 #

如果前端和接口是完全跨站关系（无共同根域名，比如前端是a.com，接口是b.com），新版本Chrome、Edge等浏览器默认开启第三方Cookie拦截，即使用户手动配置了SameSite=None;Secure，被判定为第三方的Cookie依然可能被拦截无法携带。这类场景建议优先将逻辑调整为同域部署，或通过自定义请求头传递需要的参数，不要强依赖跨站Cookie能力。

快速验证技巧 #

写完Cookie后打开浏览器开发者工具，进入Application -> Cookies面板找到你写入的myCookie条目，核对Domain、Path、SameSite、Secure字段值，和后端下发的、能正常携带的Cookie配置对齐；发请求时进入Network面板找到对应请求，查看Request Headers中的Cookie字段，确认是否有遗漏即可。

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