React登录应用：浏览器无法存储JWT Cookie及404错误求助

一、Cookie无法存储的解决步骤 #

1. 前端fetch请求添加凭证配置 #

你的登录请求未设置凭证权限，浏览器默认不会保存服务器返回的Cookie。修改fetch代码：

const res = await fetch('http://localhost:3000/signin', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
    credentials: 'include', // 关键：允许跨域场景下携带/存储Cookie
});

2. 后端CORS配置修正 #

当前router.use(cors())未开启凭证支持，需明确配置允许的前端源和凭证权限：

// 替换原有的router.use(cors())
router.use(cors({
    origin: 'http://localhost:5173', // 你的React前端运行地址
    credentials: true, // 允许跨域携带Cookie
    methods: ['GET', 'POST'], // 按需设置允许的请求方法
    allowedHeaders: ['Content-Type'],
}));

注意：origin不能设为*，否则credentials: true会失效，必须指定具体的前端地址。

3. 完善后端Cookie设置参数 #

res.cookie需补充必要参数，确保浏览器能正确识别并存储：

res.cookie('jwt', token, {
    httpOnly: true, // 防止XSS攻击，前端无法通过JS读取Cookie
    secure: process.env.NODE_ENV === 'production', // 生产环境启用，仅HTTPS传输
    sameSite: 'Lax', // 适配跨域场景，避免CSRF风险
    maxAge: 24 * 60 * 60 * 1000, // Cookie有效期，示例为1天
    path: '/', // 允许所有路径访问该Cookie
});

开发环境下secure可暂时关闭（因为是HTTP协议），生产环境必须开启。

4. 移除登录路由的auth中间件 #

登录接口是用来获取凭证的，不需要提前验证，原代码中的auth中间件会拦截未登录用户的请求，导致Cookie设置逻辑无法执行：

// 原代码：router.post('/signin', auth, async (req, res) => {
router.post('/signin', async (req, res) => { // 移除auth中间件

二、奇怪的404错误解决 #

giompennnhheakjcnobejbnjgbbkmdnd-proxy.html的404错误是Chrome浏览器扩展导致的（如VPN、广告拦截或代理类扩展），解决方法：

• 打开Chrome扩展管理页面（chrome://extensions/），逐个禁用扩展，刷新页面验证错误是否消失，找到对应扩展卸载或关闭即可。
• 该错误不影响应用功能，若不想处理可直接忽略。

内容的提问来源于stack exchange，提问作者Kalpana Media House