Node服务端设置Cookie后React前端无法访问JWT令牌的问题求助

问题原因 #

• Cookie名称不匹配：后端设置的Cookie键名是AdminJwt，但前端useCookies钩子中指定的是jwttoken，两者完全不一致，自然无法读取到目标Cookie。
• httpOnly属性限制：后端配置了httpOnly: true，这是浏览器的安全机制，会禁止前端JavaScript直接读取该Cookie，目的是防范XSS攻击窃取JWT令牌。即便修正了Cookie名称，前端也无法通过JS拿到这个Cookie。

可行解决方案 #

场景1：确实需要前端读取该Cookie #

这种场景需权衡安全风险，操作如下：

1. 后端修改Cookie配置，将httpOnly改为false：

.status(object.status)
.cookie(
   "AdminJwt",
   token,
   {
       expires: new Date(Date.now() + 3600 * 1000),
       httpOnly: false, // 关闭httpOnly限制
       sameSite: "strict",
       path:'/'
   }
)
.send(object);

2. 前端修正Cookie名称，与后端保持一致：

import { useCookies } from 'react-cookie';

const [cookies] = useCookies(['AdminJwt']);
console.log(cookies['AdminJwt']);

注意：关闭httpOnly会提升XSS攻击风险，建议同时开启HTTPS、保持sameSite: strict，并在前端做好用户输入转义等XSS防护措施。

场景2：不需要前端读取，仅需请求时自动携带Cookie #

这是更安全的方案，JWT令牌无需前端直接操作，浏览器会自动在请求时携带：

1. 保持后端httpOnly: true的配置不变。
2. 前端发送请求时，确保请求配置携带凭证（跨域场景需额外配置）：
   • 以axios为例：

   axios.get('/api/your-interface', {
     withCredentials: true
   });
   

3. 若为跨域场景，后端需配置CORS允许凭证传递（以Express为例）：

const cors = require('cors');
app.use(cors({
  origin: '你的前端域名', // 例如http://localhost:3000
  credentials: true
}));

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