Node.js 如何使用Node、Express、Axios在ReactJS前端使用JWT令牌设置cookie

因此，我可以使用postman成功地将访问令牌放入cookie，验证工作正常，但在我的前端登录时，访问令牌不会进入cookie

这在my routes/Users.js中

router.post('/login', async (req, res) => {
    const { username, password } = req.body;

    const user = await Users.findOne({ where: {username: username}});

    if(!user) res.status(400).json({error: `Username does not exist!`});

    bcrypt.compare(password, user.password).then((match) => {
        if(!match) res.status(400).json({error: 'Wrong password!'})

        const accessToken = createTokens(user);

        res.cookie('access-token', accessToken, {
            maxAge: 60*60*24*30*1000, //30 days
            secure: false,
            httpOnly: false
        });

        user.password = undefined;

        res.json(accessToken);
    })
});

控制器/jwt.js

const { sign, verify } = require('jsonwebtoken');

const createTokens = (user) => {
    const accessToken = sign(
        { username: user.username, id: user.user_id }, 
        'e2ereactsecret'
    );
    return accessToken;
};

const validateToken = (req, res, next) => {
    const accessToken = req.cookies['access-token']

    if (!accessToken) 
        return res.status(400).json({error: 'User not authenticated!'})

    try {
         const validToken = verify(accessToken, 'e2ereactsecret')
         if(validToken) {
            req.authenticated = true
            return next();
         }
    } catch(err) {
        return res.status(400).json({error: err})
    }
};

module.exports = { createTokens, validateToken };

以下是我的react前端中的登录功能：

    const login = (e) => {
        e.preventDefault();

        const config = { headers: {"Content-Type":"application/json"}};
        const data = { username: username, password: password };
        axios.post('http://localhost:4000/users/login', data, config).then((res) => {
            console.log(res);
          });
    }

这是我从console.log得到的，令牌在那里，但它没有进入cookies

{data: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZ…DYzfQ.dm1nUa-9z7AQkvirCTM3jrC9a_mx_hsA2waDqQs3cD8", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: {url: "http://localhost:4000/users/login", method: "post", data: "{\"username\":\"juan\",\"password\":\"password123\"}", headers: {…}, transformRequest: Array(1), …}
data: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imp1YW4iLCJpZCI6MiwiaWF0IjoxNjIzMDM0NDYzfQ.dm1nUa-9z7AQkvirCTM3jrC9a_mx_hsA2waDqQs3cD8"
headers: {content-length: "141", content-type: "application/json; charset=utf-8"}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: "OK"
__proto__: Object

---

我现在真的很困惑。lol.

尝试将

httpOnly

设置更改为true

---

httpOnly

设置意味着不能使用JavaScript读取cookie，但仍然可以在HTTP请求中发送回服务器。如果没有此设置，XSS攻击可以使用document.cookie获取存储的cookie及其值的列表。

您的后端和前端位于两个不同的域上，每个域分别存储其cookie

要在React中存储cookie，可以使用以下方法：

const login = (e) => {
    e.preventDefault();

    const config = { headers: {"Content-Type":"application/json"}};
    const data = { username: username, password: password };
    axios.post('http://localhost:4000/users/login', data, config).then((res) => {
        document.cookie = "token=" + res./*token location*/
        console.log(res, document.cookie);
      });
}

您可以在以下网站了解更多有关这种方式的信息：

还有一些库也可以为您这样做。react cookie和universal cookie是两种