在nodejs Express后端与reactjs前端之间进行接线问题

Question

我正在尝试将reactjs仪表板放在一起，并将其与Nodejs后端连接起来。我目前正在尝试验证jwt令牌。当我使用Postman应用程序执行此操作时，它的工作正常。但是当我使用reactjs表单尝试时，它没有发生。请帮助我在代码中查找问题。我不是经验丰富的开发人员。我对nodejs和reactjs都是新手。 任何帮助将不胜感激。 我将尝试在下面发布所有相关代码和一些快照。

//reactjs code calling this function on a button submit
 //verify user

  onVerify = event => {
    let databody = localStorage.getItem("jwtToken");
    event.preventDefault();
    console.log(databody);
    fetch("http://localhost:8000/api/auth/me", {
      method: "get",
      headers: {
        "x-access-token": databody
      }
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error("Something went wrong with your fetch");
        }
      })
      .then(json => {
        console.log(json.token);
      });
  };

Nodejs表达后端代码

//app.js
var express = require("express");

var db = require("./db");
var Cors = require("cors");

var app = express();

app.use(Cors());

var UserController = require("./user/UserController");
app.use("/users", UserController);

var AuthController = require("./auth/AuthController");
app.use("/api/auth", AuthController);

var WorkInvenController = require("./auth/WorkInvenController");
app.use("/api/workinven", WorkInvenController);

module.exports = app;

//AuthController.js


router.get("/me", function(req, res) {
  console.log(req.headers);
  var token = req.headers["x-access-token"];
  if (!token)
    return res.status(401).send({ auth: false, message: "No token provided." });

  jwt.verify(token, process.env.secret, function(err, decoded) {
    if (err)
      return res
        .status(500)
        .send({ auth: false, message: "Failed to authenticate token." });

    User.findById(decoded.id, { password: 0 }, function(err, user) {
      if (err)
        return res.status(500).send("There was a problem finding the user.");
      if (!user) return res.status(404).send("No user found.");

      res.status(200).send(user);
    });
  });
});

使用邮递员发布时，

后端的终端输出

使用来自以下位置的reactjs发布时，

后端的终端输出

浏览器错误附在下面

Answer 1

我可以看到它的“拒绝错误”

您可以仅添加x = sample(1:2, 1000, replace = T) y = sample(1:6, 1000, replace = T) df = data.frame(x, y) df %>% ggplot(aes(x = x, y = y)) + geom_point() + scale_x_continuous(breaks = c(1,2)) 并处理抛出的错误。

.catch()

有时候我们也写了一些包装器来处理错误：

onVerify = event => {
    let databody = localStorage.getItem("jwtToken");
    event.preventDefault();
    console.log(databody);
    fetch("http://localhost:8000/api/auth/me", {
      method: "get",
      headers: {
        "x-access-token": databody
      }
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error("Something went wrong with your fetch");
        }
      })
      .then(json => {
        console.log(json.token);
      }).catch(error=>{
     //handle the error in here may be
        console.log(error)
     });
  };

因此，在您的情况下，当未处理错误时（未找到.catch），将引发未处理的拒绝错误。 您可以查看上述方法并按照其中的任何一种方法进行操作，如果您仍然遇到此问题，也请告诉我。

Answer 2

对不起，我没有在此处发布整个代码，否则我相信你们早就想通了。长话短说.. 问题出在我的令牌上，我不小心将expiresIn设置为60，以为是60分钟而不是60 *60。所以令牌每隔一分钟就要到期。

现在将令牌过期设置为“ 24h”后，一切似乎都正常运行。 非常感谢您的帮助。