用 reactjs 前端连接 nodejs express 后端的问题

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 express 后端代码

//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);
    });
  });
});

使用 Postman 发布时来自后端的终端输出

使用来自的 reactjs 发布时来自后端的终端输出

浏览器错误附在下面

Answer 1

很抱歉我没有在这里发布整个代码，否则我相信你们很久以前就会想到它。长话短说.. 问题出在我的令牌上，我不小心将 expiresIn 设置为 60，认为它是 60 分钟而不是 60 * 60。所以令牌每隔一分钟就会过期。

现在将令牌到期时间设置为“24 小时”后，一切似乎都运行良好.. 非常感谢你们的帮助。

Answer 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)
     });
  };

有时我们也编写了某种包装器来处理错误：

fetch(<url>, {
      <headers>,
     <options>
    })
      .then(this._checkStatus)
      .then(response => response.json());

 _checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
      // Success status lies between 200 to 300
      return response;
    }  else {
//here handle the error may be.
      var error = new Error(response.statusText);
      console.log(error);
    }
  }

因此，在您的情况下，当错误出现时未处理，因为没有找到 .catch，它会抛出未处理的拒绝错误。 您可以查看上述方法并按照其中任何一种方法进行操作，如果您仍然遇到此问题，请告诉我。