我正在为node.js
和react.js
使用express构建一个登录系统。在我的后端,当一个用户登录时,它会创建一个cookie。当我进入网络〉登录时,我可以看到:
设置Cookie:
user_id=s%3A1.E%2FWVGXrIgyXaM4crLOoxO%2Fur0tdjeN6ldABcYOgpOPk; Path=/; HttpOnly; Secure
但是当我进入应用程序〉Cookies〉http://localhost:3000时,什么都没有。我相信这是因为当我从客户端发出一个post请求时,我不允许凭证正确通过。我该怎么做呢?请告诉我,如果我能以任何方式改进我的问题。
//Login back-end
router.post('/login', (req, res, next) => {
if(validUser(req.body)) {
User
.getOneByEmail(req.body.email)
.then(user => {
if(user) {
bcrypt
.compare(req.body.password_digest, user.password_digest)
.then((result) => {
if(result) {
const isSecure = process.env.NODE_ENV != 'development';
res.cookie('user_id', user.id, {
httpOnly: true,
secure: isSecure,
signed: true
})
res.json({
message: 'Logged in'
});
} else {
next(new Error('Invalid Login'))
}
});
} else {
next(new Error('Invalid Login'))
}
});
} else {
next(new Error('Invalid Login'))
}
});
//Allow CORS index.js
app.use(
cors({
origin: "http://localhost:3000",
credentials: true
})
);
//Login client side (React.js)
loginUser(e, loginEmail, password) {
e.preventDefault();
let email = loginEmail;
let password_digest = password;
let body = JSON.stringify({ email, password_digest });
fetch("http://localhost:5656/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
credentials: "include",
body
})
.then(response => response.json())
.then(user => {
console.log(user);
});
}
5条答案
按热度按时间bogh5gae1#
您应确保在服务器和应用程序中设置“凭据”。
尝试在index.js或app.js服务器端设置以下内容:
并在您客户端站点中添加如下选项:
编辑
要在服务器中设置“凭据”,我们需要以下行:
这将允许您处理包含在标头中的凭据。
您还必须告诉
axios
在标头中使用以下命令设置凭据:euoag5mw2#
不要忘记调整cors中间件。
您的node.js快速代码
您的前端代码
lp0sw83n3#
这是因为您设置了
httpOnly: true
。这将阻止对客户端的可见性,就像从javaScript
document.cookie()
阅读一样。您可以通过将其关闭来解决此问题。
w3nuxt5m4#
如果你在浏览器中看不到你的cookie,我想这是因为你在cookie的选项中设置了hhtpOnly为true。
cookie.httpOnly指定HttpOnly Set-Cookie属性的布尔值。如果为true,则设置HttpOnly属性,否则不设置。默认情况下,设置HttpOnly属性。
注意:将其设置为true时要小心,因为兼容的客户端将不允许客户端JavaScript查看document.cookie中的cookie
lp0sw83n5#
您需要先在后端服务器中配置cors。
首先,使用
npm i cors
安装cors,然后在Express服务器中添加以下代码行:然后,在向后端发送GET/POST请求的前端应用程序中,确保在请求中添加
如果您已经使用了fetch:
如果使用axios:
这将解决在前端存储从后端发送的cookie的问题。