React + Express-路由器呈现JSON数据而不是浏览器上的React组件

Question

我有两个类似的情况，结果不同。其中之一是将react组件呈现为html页面，另一种是在浏览器中显示json数据。

这是带有json数据的页面

如上图所示，还有一条错误消息：

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).

---

以下是表达上面图片所示结果的快速反应代码：

---

快捷设置

import express from "express";
import bodyParser from "body-parser";
import path from "path";
import cors from "cors";
import user_router from "./routes/UserRoutes";
import auth_router from "./routes/AuthRoutes";

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use("*", cors());

app.use("/", user_router);
app.use("/", auth_router);

// Let the things inside frontend folder loadable from browser under public path
app.use("/public", express.static(path.join(__dirname, "frontend")));

// No matter what browser ask, return the content
app.get("*", (req, res) => {
  res.status(200).sendFile(path.join(__dirname, "./index.html"));
});

export default app;

数据库和服务器连接

import app from "./express";
import mongoose from "mongoose";

const PORT = process.env.PORT || 3000;
const mongoClientURI =
  process.env.MONGODB_URI ||
  process.env.MONGO_HOST ||
  "mongodb://" +
    (process.env.IP || "localhost") +
    ":" +
    (process.env.MONGO_PORT || "27017") +
    "/mernloginsystem";

/* CONNECT TO MONGODB */
const db = mongoose.connect;
db(mongoClientURI, { useNewUrlParser: true });
mongoose.connection
  .on("error", () => {
    throw new Error(`Unable to connect to ${mongoClientURI}`);
  })
  .once("open", () => {
    console.log("Connected to %s", mongoClientURI);
  });
/* <-- end --> */

/* CONNECT To NodeJs SERVER USING EXPRESS */
app.listen(3000, err => {
  if (err) {
    console.log(err);
  }
  console.log(`Server running on port ${PORT}`);
});
/* <--end--> */

快速路由器

router.route("/email/verify/:emailtoken")
.get(authCtrl.mailFromToken)
.post(authCtrl.verifyEmail);

反应路由器

<Route path="/email/verify/:emailtoken" component={Verify} />

控制器

const emailtoken = (req, res, next, token) => {
  UserModel.findOne({ mailToken: token }).exec((err, user) => {
    if (err) {
      return res.status(400).json({
        Error: "Email token is expired!"
      });
    }
    req.userinfo = user;
    next();
  });
};

const mailFromToken = (req, res, next) => {
  if (!req.userinfo) {
    return res.json({
      error: "No user found!"
    });
  }
  return res.json({ email: req.userinfo.email });
};

const verifyEmail = (req, res, next) => {
  // console.log(req.userinfo);
  // check if token present in the url
  if (!req.userinfo) {
    return res.status(400).json({
      error: "The verification token is not valid. Please register first!",
      norecord: true
    });
  }

  if (Object.keys(req.body).length === 0 && req.body.constructor === Object) {
    return res.status(400).json({
      error: "Not enough data is supplied!"
    });
  }

  const user = req.userinfo;

  // Check for token expiration (substract date) <---
  const currentDate = new Date();
  const tokenAge = Math.abs(currentDate - user.tokenCreation) / (1000 * 60 * 60);
  console.log(tokenAge);
  if (tokenAge >= 20) {
    return res.status(400).json({
      error: "Token expired!"
    });
  }

  // compare token
  // activate user if valid
  if (user.mailToken === req.body.emailToken) {
    const activation = { confirmed: true, userActivation: currentDate };

    UserModel.findOneAndUpdate(
      { _id: user._id },
      { $set: activation },
      { upsert: true, new: true },
      (err, activated) => {
        if (err) {
          return res.status(400).json({
            error: "There are problem when attempting to update this user!"
          });
        }

        return res.status(200).json({ activated, success: "Verification succeed!" });
      }
    );
  }
};

---

将React组件呈现为HTML页面的代码

---

快速路由器

user_router
  .route("/api/users/:user_id")
  .get(authControl.signedInOnly, UserControl.get_one)
  .put(authControl.signedInOnly, authControl.currentUserOnly, UserControl.update_one)
  .delete(authControl.signedInOnly, authControl.currentUserOnly, UserControl.delete_one)
  .post(authControl.signedInOnly, authControl.currentUserOnly, UserControl.move_and_delete);

反应路由器

<Route path="/profile/:user_id" component={Profile} />

控制器

// GET SELECTED USER'S DATA TO BE USED ON THE NEXT MIDDLEWARE
const user_id = (req, res, next, id) => {
  UserModel.findById(id).exec((err, user) => {
    if (err) {
      return res.status(400).json({
        error: "Cannot retrieve user with that id!"
      });
    }

    req.userinfo = user;

    next();
  });
};
    // GET ONE USER
    const get_one = (req, res, next) => {
      if (!req.userinfo) {
        return res.status(400).json({
          message: "Forbiddem!"
        });
      }
      console.log("get_one");
      return res.json(req.userinfo);      
    };



// MOVE AND DELETE
const move_and_delete = (req, res, next) => {
  if (req.userinfo === null) {
    return res.status(400).json({
      error: "That user does not exist!"
    });
  }

  if (!req.userinfo.comparePassword(req.body.password)) {
    return res.status(400).json({
      error: "Password not match!"
    });
  }
  const { _id, ...user_data } = req.userinfo.toObject();
  const moved = new UserModel_deleted(user_data);
  moved.save((err, result) => {
    if (err) {
      if (err.errmsg.includes("duplicate")) {
        return delete_one(req, res, "Cannot save duplicate data!");
      }
      console.log(err);
      return res.status(400).json({
        error: err
      });
    }
    delete_one(req, res, "Saved to database!");
  });
};
// END move and delete

// DELETE ONE USER
const delete_one = (req, res, message) => {
  let selected_user = req.userinfo;
  console.log("delete_one");
  if (selected_user === null) {
    return res.status(400).json({
      error: "That user does not exist!"
    });
  }
  UserModel.deleteOne({ _id: selected_user._id }, (err, user) => {
    if (err) {
      console.log(err);
      return res.status(400).json({
        error: "Something went wrong!"
      });
    }
    // console.log({ message, user });
    return res.status(200).json({ success: { message, user } });
  });
};

仅由于我放置了get方法，该页面在浏览器上呈现了json结果，而不是react component / html页面。虽然另一个也具有get方法，但仍在呈现html页面。

为什么它们的模式相似却又在浏览器上给出不同类型的结果，并且是什么导致上面的错误消息显示？