React JS 不接受来自 express 服务器的 cookie答案

【问题标题】：React JS not accepting cookies from express severReact JS 不接受来自 express 服务器的 cookie
【发布时间】：2022-02-03 22:46:29
【问题描述】：

我正在从快速服务器 (res.cookie()) 发送 cookie，但这不适用于我的前端，即使我在获取请求中包含 {withCredentials:true}，但它在浏览器中不起作用，没有 cookie在浏览器的应用程序选项卡中设置。但是，如果我尝试使用邮递员的请求，中间件可以完美运行并显示 cookie。我尝试了不同的浏览器和不同的设备，但没有。 cors 配置：

app.use(
  cors({
  
    credentials: true,
    origin: [
      "http://localhost:3000", 
    ],
    methods: ["GET", "POST"],

  })
);

cookie 解析器配置：

app.use(cookieParser())

这是检查用户是否已经登录的获取请求：

    await axios
        .get("http://192.168.0.141:3001/login", { withCredentials: true })
        .then(async (response) => {

            if (response) {
                loggedIn = true
            }
        })
        .catch(async err => {

            loggedIn = false
        })

jwt 的中间件：

const validateToken = (req, res, next) => {
    const accessToken = req.cookies["access-token"]
    if (!accessToken) { return res.status(400).json({ error: "user not authenticated" }) }
    try {
        const validToken = jwt.verify(accessToken, "test");
        if (validToken) {
            req.authenticated = true
            return next();
        }
    } catch (error) {
        return res.status(400).json({ error: error });
    }
}

如果您需要更多说明，请告诉我，谢谢您的帮助

【问题讨论】：

你不是从 nodejs/server 端执行 axios 部分，是吗？
axios 来自前端，而后端有一个 app.post 和 app.get ，
问题是使用邮递员的请求可以完美运行并返回一个jwt令牌但是执行来自前端的请求不起作用，只是没有cookie返回到前端

标签： javascript express cookies axios jwt

【解决方案1】：

你没有提到你是否使用了cookie-parser；要在 express 中使用 cookie，您需要安装 cookie-parser 并按如下方式使用它：

npm install cookie-parser;

然后在你的应用中；

const cookieParser = require('cookie-parser');

// when adding middlewares

app.use(cookieParser())

【讨论】：

是的，我用过，可惜我没有提到它
然后你需要设置你的服务器来接受和设置跨域请求的cookies：app.use(function(req, res, next) { res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Origin', req.headers.origin); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'); next(); });见：stackoverflow.com/questions/29250894/…
我试过了，但是浏览器中的前端仍然没有收到任何 jwt 令牌:(
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
我可能需要查看更多代码才能知道这可能有什么问题。您在服务器上的何处设置 cookie，从这个中间件，任何没有访问令牌 cookie 的请求都会以 400 状态响应，无需进一步处理。第一次怎么给用户设置cookie？

【解决方案2】：

您确定没有设置 cookie 吗？你是怎么检查的？响应是否包含 Set-Cookie 标头？您正在使用哪些 cookie 参数（安全、同一站点？）。请记住，浏览器中的 cookie 保存在设置 cookie 的域下。如果您正在查看开发人员工具的“应用程序”选项卡，则必须在 http://192.168.0.141:3001 而不是 http://localhost:3000 上打开开发人员工具。在您的 SPA 的“应用程序”选项卡中，您不会看到这些 cookie，但浏览器应该将它们与任何 XHR 请求一起发送，因此您应该在“网络”选项卡的请求的 Cookie 标头中看到它们。

【讨论】：