React前端Cookie无法设置，Postman正常的技术问题求助

我正在开发一个全栈电商网站，登录时后端会返回包含token、成功提示信息和用户详情的对象。为限制未登录用户访问特定功能，我编写了isVerified中间件，用于从Cookie中获取token并验证身份。所有接口在Postman中测试正常，但React前端调用需验证的接口时，后端始终提示req.cookies.token未定义。我希望token能存储在前端Cookie中，且后端可正常读取，虽有其他验证方案，但优先希望通过后端设置Cookie的方式解决问题。

技术栈 #

• React.js
• Express.js
• 浏览器：Chrome

已尝试的操作 #

• 移除Cookie的secure属性
• 将Cookie的httpOnly设为false
• 配置CORS的credentials为true

代码片段 #

前端登录函数 #

const handleSubmit = async (e) => {
    e.preventDefault();
    const user = { email, password };
    const response = await login(user);
    if (response.error) {
        console.error('Login error:', response.error);
    } else {
        Cookies.set('token', response.token, { expires: 7, sameSite: 'lax' });
        setUser(response.user);
        console.log('Login successful:', response);
        navigate('/');
    }
};

后端身份验证中间件 #

const isVerified = async (req, res, next) => {
    const token = req.cookies.token;
    console.log(token);

    if (!token) {
        return next(new ErrorHandler("Login first to access this resource", 401));
    }
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = await User.findById(decoded.id);
    next();
};

后端sendToken工具函数 #

// 创建token并通过Cookie返回
const sendToken = (user, statusCode, res) => {
    const token = user.getJwtToken();

    const options = {
        expires: new Date(
            Date.now() + process.env.COOKIE_EXPIRES_TIME * 24 * 60 * 60 * 1000
        ),
        httpOnly: false,
    };

    res.status(statusCode).cookie("token", token, options).json({
        success: true,
        token,
        user,
    });
};
module.exports = sendToken;

后端CORS配置 #

app.use(
    cors({
        origin: "http://localhost:3000",
        credentials: true,
    })
);

解决方案 #

1. 前端请求必须携带credentials #

前端所有涉及身份验证的请求（包括登录请求）必须开启withCredentials，否则浏览器不会在请求中携带Cookie。如果使用axios，可全局配置：

import axios from 'axios';
axios.defaults.withCredentials = true;

或者在单个请求中设置：

const login = async (user) => {
    const res = await axios.post('/api/login', user, { withCredentials: true });
    return res.data;
};

2. 补全后端Cookie的sameSite属性 #

Chrome对跨域Cookie的默认限制较严格，需在Cookie配置中添加sameSite属性：

const options = {
    expires: new Date(
        Date.now() + process.env.COOKIE_EXPIRES_TIME * 24 * 60 * 60 * 1000
    ),
    httpOnly: false,
    sameSite: 'lax', // 添加该属性
};

3. 移除前端手动设置Cookie的代码 #

后端已通过res.cookie自动设置Cookie，前端无需重复调用Cookies.set，否则可能导致Cookie冲突或覆盖，直接删除以下代码：

Cookies.set('token', response.token, { expires: 7, sameSite: 'lax' });

4. 确保后端启用cookie-parser中间件 #

要读取req.cookies必须安装并使用cookie-parser，否则req.cookies会是undefined：

npm install cookie-parser

然后在Express app中添加：

const cookieParser = require('cookie-parser');
app.use(cookieParser());

验证步骤 #

1. 登录成功后，打开Chrome开发者工具→Application→Cookies→检查对应域名下是否存在token Cookie
2. 发送需验证的请求时，查看Network面板的Request Headers，确认Cookie字段包含token值

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