JS-Cookie获取authToken返回null，但响应头存在该Cookie的原因排查

先看看你提供的代码片段：

import Cookies from 'js-cookie';
//this returns null 
const authTokenFromCookies = Cookies.get('authToken');
console.log("AuthToken from cookies:", authTokenFromCookies);


// This returns the token set from the backend
const authToken = response.headers['authToken'];
console.log("AuthToken after login:", authToken);

这种情况我之前在项目里也踩过好几次坑，下面给你列几个最可能的原因，你可以逐个排查：

• Cookie带了HttpOnly标记：如果后端在Set-Cookie响应头里给authToken加了HttpOnly属性，比如Set-Cookie: authToken=xxx; HttpOnly，那浏览器会禁止前端JS（包括js-cookie）访问这个Cookie，这是专门防XSS攻击的安全机制。你可以打开浏览器开发者工具，看Network面板里登录请求的Response Headers，找Set-Cookie字段有没有这个标记，要是有，前端就别想通过JS拿到它了，只能走后端接口或者服务端渲染的方式获取。

• 跨域场景下SameSite属性不兼容：要是你的前端和后端是跨域的（比如前端跑在localhost:3000，后端在localhost:8080），后端设置的SameSite如果是Strict或Lax，浏览器会限制这个Cookie的访问，导致js-cookie读不到。这种情况得让后端把SameSite改成None，同时必须搭配Secure属性（HTTPS环境下生效），这样跨域时浏览器才会允许前端访问这个Cookie。

• Cookie的Path/Domain和当前页面不匹配：后端设置Cookie时如果指定了特定的Path（比如Path=/api）或者Domain（比如Domain=.yourdomain.com），而你的前端页面所在的路径或域名和这个不匹配，那js-cookie在当前页面就找不到这个Cookie。比如你在根路径/的页面，Cookie的Path却是/admin，那肯定读不到。你可以在浏览器Application面板的Cookies里，找到对应域名下的Cookie，看看它的Path和Domain是不是和当前页面一致。

• 跨域请求没配置带Credentials：如果是跨域登录请求，后端CORS配置没加Access-Control-Allow-Credentials: true，同时前端发起请求时没开启withCredentials（比如axios里要设置withCredentials: true），那浏览器不会把后端返回的Cookie保存到本地，哪怕响应头里能看到Set-Cookie也没用。这时候得同时配置前后端的Credentials参数，让浏览器允许保存跨域Cookie。

• 代码执行时机太早：会不会是你在登录请求刚拿到响应，还没等浏览器把Cookie写入本地存储，就立刻调用Cookies.get()了？浏览器处理Set-Cookie是异步的，可能需要一点时间。你可以试试把读取Cookie的代码延迟一下（比如用setTimeout测试），或者刷新页面后再读，看看能不能拿到值。

备注：内容来源于stack exchange，提问作者StackTactic