NodeJS 如何在React中获取从Express js api(MERN堆栈)传递cookie

4si2a6ki  于 2022-10-04  发布在  Node.js
关注(0)|答案(2)|浏览(213)

我在express js中有一个api,它将token存储在客户端的cookie中(react)。只有当用户登录到站点时才会生成cookie。例如,当我用postman测试登录api时,cookie如预期的那样生成,如下所示:

但是当我用react.js登录时,浏览器中没有发现cookie。看起来cookie没有传递到前端,如下面的截图所示:

当我们收到一条警告消息时,这意味着express api工作正常,没有任何错误!!
下面是我在express js上的index.js文件,其中也包含cookie-parser中间件

  1. require("dotenv").config();
  2. const port = process.env.PORT || 5050;
  3. const express = require("express");
  4. const app = express();
  5. const cors = require("cors");
  6. const authRouter = require("./routes/auth");
  7. var cookieParser = require('cookie-parser')
  8. connect_db();
  9. app.use(express.json());
  10. app.use(cookieParser())
  11. app.use(cors());
  12. app.use("/" , authRouter);
  13. app.listen(port , () => {
  14. console.log("Server is running!!");
  15. })

用于设置仅来自express api的cookie的代码controller

  1. const User = require("../models/user");
  2. const jwt = require("jsonwebtoken");
  3. const bcrypt = require('bcrypt')
  4. const login = async (req, res) => {
  5. const { email, password } = req.body;
  6. try {
  7. const checkDetails = await User.findOne({ email });
  8. if (checkDetails) {
  9. const { password: hashedPassword, token, username } = checkDetails;
  10. bcrypt.compare(password, hashedPassword, function (err, matched) {
  11. if (matched) {
  12. res.cookie("token", token, { expires: new Date(Date.now() + (5 * 60000)) , httpOnly: true }).json({ "message": "You logged in sucessfully!" });
  13. } else {
  14. res.status(500).json({ "message": "Wrong password" });
  15. }
  16. });
  17. } else {
  18. res.status(500).json({ "message": "Wrong email" });
  19. }
  20. } catch (error) {
  21. console.log(error.message);
  22. }
  23. }

下面是react.js代码,我使用它在package.json文件中从api获取数据,而不使用代理

  1. if (errors.length === 0) {
  2. const isLogin = await fetch("http://localhost:5000/api/login", {
  3. method: "POST",
  4. body: JSON.stringify({ email, password }),
  5. headers: {
  6. "Content-Type": "application/json"
  7. }
  8. });
  9. const res = await isLogin.json();
  10. if(res) alert(res.message);
  11. }

我想知道“在 Postman 中得到cookie而在浏览器中没有”背后的原因是什么。我需要使用任何react包吗?
网络选项卡屏幕截图可能会对您有所帮助。If I see in the network tab I get the same cookie, set among the other headers

sr4lhrrt

sr4lhrrt1#

据我所知,fetch不会发送带有浏览器为该域存储的cookie的请求,同样,它也不会存储在响应中接收到的任何cookie。这似乎是fetch的预期行为。
要覆盖此设置,请尝试在发出请求时设置凭据选项,如下所示:

  1. fetch(url, {
  2. // ...
  3. credentials: 'include'
  4. })

或者,可替换地:

  1. fetch(url, {
  2. // ...
  3. credentials: 'same-origin'
  4. })

您可以阅读更多有关这两种here之间差异的信息。

erhoui1w

erhoui1w2#

我通过代码中的两处更改解决了错误
在前端只添加了credentials: 'include'

  1. fetch(url, {
  2. method : "POST"
  3. body : body,
  4. headers : headers,
  5. credentials: 'include'
  6. })

在后端,只需将app.use(cors());替换为

  1. app.use(cors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Set-Cookie', 'Date', 'ETag'] }))

这是它得到了解决,现在我有cookie存储在我的浏览器!!!太好了。感谢这篇文章:

  1. https://www.anycodings.com/2022/01/react-app-express-server-set-cookie-not.html
展开查看全部

相关问题