我有一个nodejs/express + React CRA应用程序,我正在尝试从nodejs设置一个cookie。服务器位于端口 4001 上,因此在我的 React 应用程序的 project.json 中,我设置了 "proxy": "http://localhost:4001" ,但 cookie 仍然不会在浏览器。

我也在生产模式下对其进行了测试,React 应用程序直接从 Nodejs 提供服务,并且一切正常。

这是我设置 cookie 的方法。我在这里尝试了几种不同的选项组合,它们都有相同的结果。

res.cookie('jwt', token, { 
    httpOnly: false, 
    sameSite: false, 
    signed: false, 
    secure: false, 
    encode: String 
}); 
res.header('Access-Control-Allow-Credentials', 'true'); 

编辑:在客户端,我使用 Axios 来处理我的 ajax 请求。

编辑:

这是登录的端点函数(POST/api/users/login):

login: function(req, res) { 
    User.findOne({ 
        $or: [{email: req.body.username}, {username: req.body.username}] 
    }).exec().then(user => { 
        if(user) { 
            if(user.checkPassword(req.body.password)) { 
                jwt.sign({ userID: user._id }, 'secret', (err, token) => { 
                    res.cookie('jwt', token, { 
                        httpOnly: false, 
                        sameSite: false, 
                        signed: false, 
                        secure: false, 
                        encode: String 
                    }); 
                    res.header('Access-Control-Allow-Credentials', 'true'); 
                    res.status(200).send({ status: 'ok', message: 'Success'}); 
                }); 
            } 
            else { 
                return res.status(401).send({ status: 'error', message: 'Invalid username/password combination. Please try again.' }); 
            } 
        } 
        else { 
            return res.status(401).send({ status: 'error', message: 'Invalid username/password combination. Please try again.' }); 
        } 
    }, err => { 
        return res.status(500).send({ status: 'error', message: 'unexpected error' }); 
    }); 
} 

这是客户端登录代码:

login(username, password) { 
    return new Promise((resolve, reject) => { 
        axios({ 
            method: 'post', 
            url: 'http://localhost:4001/api/users/login', 
            data: { 
                username, 
                password 
            } 
        }).then((res) => { 
            resolve(res.data); 
        }, (err) => { 
            reject(err); 
        }); 
    }); 
} 

服务器位于端口 4001,React CRA 服务器位于 3000

请您参考如下方法:

要允许浏览器设置 cookie 并遵守同源策略,您的客户端代码应查询 http://localhost:3000/api/users/login (与客户端相同的主机)而不是(代理)服务器 URL(端口 4001)。

您还可以将基本 URL 指定为 ${window.location.origin}/api 或仅 /api


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!