如何在从 express js api（MERN 堆栈）传递的反应中获取 cookie

Question

我在 express js 中有一个 api，它将令牌存储在客户端的 cookie 中（反应）。 cookie 仅在用户登录网站时生成。例如，当我用邮递员测试登录 api 时，会按预期生成 cookie，如下所示：

但是当我使用 react.js 登录时，在浏览器中找不到 cookie。看起来 cookie 没有传递到前端，如下面的屏幕截图所示：

当我们收到一条警告消息时，这意味着 express api 工作正常，没有任何错误！！

这是我在 express js 上的 index.js 文件，其中还包括 cookie-parser 中间件

require("dotenv").config();
const port = process.env.PORT || 5050;
const express = require("express");
const app = express();
const cors = require("cors");
const authRouter = require("./routes/auth");
var cookieParser = require('cookie-parser')



connect_db();

app.use(express.json());
app.use(cookieParser())
app.use(cors());
app.use("/" , authRouter);



app.listen(port , () => {
    console.log("Server is running!!");
})

仅从 express api 设置 cookie 的代码 controller

const User = require("../models/user");
const jwt = require("jsonwebtoken");
const bcrypt = require('bcrypt')


const login = async (req, res) => {
    const { email, password } = req.body;
    try {
        const checkDetails = await User.findOne({ email });
        if (checkDetails) {
            const { password: hashedPassword, token, username } = checkDetails;
            bcrypt.compare(password, hashedPassword, function (err, matched) {
                if (matched) {
                    res.cookie("token", token, { expires: new Date(Date.now() + (5 * 60000)) , httpOnly: true }).json({ "message": "You logged in sucessfully!" });
                } else {
                    res.status(500).json({ "message": "Wrong password" });
                }
            });
        } else {
            res.status(500).json({ "message": "Wrong email" });
        }
    } catch (error) {
        console.log(error.message);
    }
}

这是我在不使用 package.json 文件中的代理的情况下从 api 获取数据的 react.js 代码

    if (errors.length === 0) {

      const isLogin = await fetch("http://localhost:5000/api/login", {
        method: "POST",
        body: JSON.stringify({ email, password }),
        headers: {
          "Content-Type": "application/json"
        }
      });
      const res = await isLogin.json();
      if(res) alert(res.message);
    }

我想知道这个“在邮递员中而不是在浏览器中获取cookie”背后的原因是什么。我需要使用任何反应包吗？

网络选项卡屏幕截图可能对您有所帮助。 If I see in the network tab I get the same cookie, set among the other headers

Answer 1

据我了解，fetch 不会使用您的浏览器为该域存储的 cookie 发送请求，同样，它不会存储在响应中收到的任何 cookie。这似乎是 fetch 的预期行为。

要覆盖它，请尝试在发出请求时设置凭据选项，如下所示：

fetch(url, {  
  // ...
  credentials: 'include'  
})

或者，或者：

fetch(url, {  
  // ...
  credentials: 'same-origin'  
})

您可以阅读更多关于两者之间差异的信息here。

Answer 2

我通过代码中的两个更改解决了我的错误

在前端刚刚添加credentials: 'include'

      fetch(url, {  
         method : "POST"
         body : body,
         headers : headers,
         credentials: 'include'  
      })

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

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

就这样解决了，现在我的浏览器中存储了 cookies！！！伟大的。感谢这篇文章：

https://www.anycodings.com/2022/01/react-app-express-server-set-cookie-not.html

Answer 3

在开发过程中我也遇到了同样的事情，让我来帮助你解决它，

首先，你在你的 react package.json 中使用代理，在私有代理下面：-

"private": true,
"proxy":"http://127.0.0.1:5000",

提及您的节点服务器正在运行的相同端口 喜欢：-

app.listen(5000,'127.0.0.1',()=>{
console.log('Server is Running');
});

以上两者必须相同，现在反应将像往常一样在端口 3000 上运行，但现在我们将创建代理来反应因此，反应和节点端口在代理的帮助下间接连接到相同的端口。

现在，当您从 React 发出 GET 或 POST 请求时，不要提供完整的 URL，只提供您希望在后端被命中并获得响应的路径，

例子：- 对发送请求做出反应，如下所示：-

const submitHandler=()=>{

    axios.post('/api/loginuser', 
    {mobile:inputField.mobile,password:inputField.password})
    .then((res)=>{
    console.log(res);
    })
    .catch((err)=>{
    console.log(err);
    })
    }

 Node side where it will hit:-
app.post('/api/loginuser', async(req,res)=>{
//Your Code Stuff Here          
res.send()
}

双方都应该点击相同的链接，这非常重要

它将 100%。 别忘了提

在服务器正在侦听的节点 main 上