从后端发送的 Cookie 但在前端未正确设置

Question

我运行关注这个问题：

localhost:3000（React 应用程序）
localhost:9000（Nodejs 后端）

我能够从邮递员发送请求并在那里接收 cookie，但是在前端，当我在浏览器中检查 cookie 时，什么也没有。

Cookie 在“应用程序”>“Cookie”选项卡下不可见。

我用于处理注册和发送 cookie 的代码：

// requirements
const User = require('../models/User');
const jwt = require('jsonwebtoken');

// handle errors
const handleErrors = (err) => {
    console.log(err.message, err.code);
    let errors = { first_name: '', last_name: '', email: '', password: '' };

    // duplicate error code
    if (err.code === 11000) {
        errors.email = 'That email is already registered';
        return errors;
    }

    // validation errors
    if (err.message.includes('User validation failed')) {
        Object.values(err.errors).forEach(({ properties }) => {
            errors[properties.path] = properties.message;
        });
    }
    return errors;
}

const maxAge = 3 * 24 * 60 * 60;
const createToken = (id) => {
    return jwt.sign({ id }, 'Dummy Secret', {
        expiresIn: maxAge
    });
}

// module exporting

module.exports.signup_post = async (req, res) => {
    const { first_name, last_name, email, password } = req.body;
    
    try {
        const user = await User.create({ first_name, last_name, email, password });
        const token = createToken(user._id);
        res.cookie('jwt', token, { httpOnly: true, maxAge: maxAge * 1000 });
        res.status(201).json({ user: user._id });
    }
    catch (err) {
        const errors = handleErrors(err);
        res.status(400).json({ errors });
    }
};

如果有人能指导我该怎么做，我将不胜感激

更新： 我做了一些测试，结果如下：当我运行这段代码在后端的主要 app.js 中并从前端发送请求时，cookies 仍然是乱七八糟的，所以它很可能是前端。

app.get('/set-cookies', (req, res) => {
    res.cookie('newUesr', false);
    res.cookie('isEmployee', true, { maxAge: 1000 * 60 * 60 * 24, httpOnly: true});

    res.send('you got the cookies!');
});

app.get('/read-cookies', (req, res) => {
const 

});

但是当我在前面显示的代码中通过我的控制器执行此操作时，它会卡在设置的 cookie 中，如此 picture

所示

Answer 1

这里有一个有助于理解 httpOnly cookie 和替代方法的link。

Answer 2

我通过执行这些步骤解决了问题：

确保获取请求具有 withCredntials: true 和 credentials: 'include'，因此获取请求将如下所示：

    fetch("http://localhost:9000/testAPI", {
                withCredntials: true,
                credentials: 'include'
    })

请记住，这仅适用于 GET 请求，而不适用于没有第二步的 POST 请求。

对于被 cors 阻止的 POST 请求，只需确保在你需要 cors 之后你的后端有这行 app.use(cors({credentials: true, origin: true})); 使用 * 或 http://localhost:3000（无论端口号如何）而不是 true 似乎会给出错误。

注意：根据@ikhvjs 的说法，withCredntials: true 不是必需的，但是我还没有尝试过，所以风险自负。

谢谢大家的帮助:D

从后端发送的 Cookie 但在前端未正确设置

Cookies sent from backend but not set correctly on frontend

javascript

cookies

node.js

express

reactjs