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

Question

我遇到了这个问题:

• 本地主机：3000（React应用程序）
• 本地主机：9000（节点后端）

我可以从邮递员那里发送请求并接收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 });
    }
};

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

更新：我做了一些测试，结果如下：当我在主应用程序中运行此代码时.js在后端并从前端发送请求时，cookie仍然搞砸了，所以它很可能是前端。

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 

});

但是，当我在前面显示的代码中通过我的控制器这样做时，它卡在设置的cookies中，如图所示

Answer 1

我能够通过以下步骤解决问题：

确保获取请求
1. 具有withCredntials：true和凭据：“include”，因此获取请求将如下所示：

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

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

注意：根据@ikhvjs的with Credntials： true不是必需的，但是我还没有尝试过，所以请自担风险。

谢谢大家的帮助： D

Answer 2

这里有一个有助于理解httpOnly cookies和替代方法的链接。如何在React中获取HTTP-only cookie？