即使使用代理,Node.js也不会为React CRA应用程序设置cookie [英] Nodejs won't set cookie for React CRA application even with proxy
问题描述
我有一个nodejs/express + React CRA应用程序,我正在尝试从nodejs设置cookie.服务器在端口4001上,因此在我的React应用程序的project.json中,我设置了"proxy":"http://localhost:4001"
,但是cookie仍然不会设置浏览器.
I have a nodejs/express + React CRA application, and I'm trying to set a cookie from nodejs. The server is on port 4001, so in my React application's project.json I have "proxy": "http://localhost:4001"
set, but the cookie still won't get set in the browser.
我也已经在生产模式下对其进行了测试,React应用程序直接由nodejs提供服务,并且在那里都能正常工作.
I've tested it in production mode as well, with the React application being served from nodejs directly and it all works fine there.
这是我设置Cookie的方式.我在这里尝试了几种不同的选项组合,它们都具有相同的结果.
Here is how I am setting the cookie. I've tried several different combinations of options here and they all have the same result.
res.cookie('jwt', token, {
httpOnly: false,
sameSite: false,
signed: false,
secure: false,
encode: String
});
res.header('Access-Control-Allow-Credentials', 'true');
在客户端,我正在使用Axios来处理我的Ajax请求.
On the client side I am using Axios for my ajax requests.
这是用于登录的端点函数(POST/api/users/login):
Here is the endpoint function for login (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' });
});
}
这是客户端的登录代码:
Here is the client-side login code:
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上
Server is on port 4001, React CRA server is on 3000
推荐答案
要允许浏览器设置cookie并遵守Same Origin Policy,您的客户端代码应查询 http://localhost:3000/api/users/login
(与客户端相同的主机),而不是(代理的)服务器网址(端口4001).
To allow the browser to set cookies and adhere to Same Origin Policy, your client code should query http://localhost:3000/api/users/login
(same host as client) instead of the (proxied) server url (port 4001).
您还可以将基本网址指定为 $ {window.location.origin}/api
或仅/api
.
You can also specify the base url as ${window.location.origin}/api
or just /api
.
这篇关于即使使用代理,Node.js也不会为React CRA应用程序设置cookie的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!