Express Router 端点的 CORS 问题

Question

我有一个 react 应用程序正在向 express 节点服务器进行 REST。

快速路由器定义了一堆rest端点。

当我使用邮递员点击快速路由器中的端点时，它工作正常。

当我用我的 react 应用程序到达端点时，它没有。当我的 react 应用程序使用 axios 进行调用时，我看到 400 错误。

这就是我的 index.js 的样子：

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const passport = require("passport");
const cors = require("cors");

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
// server.use(bodyParser.json());
app.use(cors());
// app.options("*", cors());

const UserModel = require("./models/User");

mongoose
  .connect(
    "mongodb"
  )
  .then(() => console.log("SUCESSFULLY connected to MongoDB!"))
  .catch((error) => console.log(`FAILED tot connect to MongoDB: ${error}`));

require("./auth/localStrategyAuth");

const authRoutes = require("./routes/authRoutes");
app.use("/v1", authRoutes);

// app.post("/", (req, res) => {
//   res.send("Hello World!");
// });
// app.post("/v1/signup", (req, res) => {
//   console.log("lol");
// });

// app.use(express.json());
const PORT = 5000;
app.listen(PORT, () =>
  console.log(`ui-rest listening on port localhost:${PORT}`)
);

user.js

const mongoose = require("mongoose");
const bcrypt = require("bcrypt");
const { Schema } = mongoose;

const UserSchema = new Schema({
  email: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
});

const UserModel = mongoose.model("user", UserSchema);
module.exports = UserModel;

authRoutes.js

const express = require("express");
const passport = require("passport");
const jwt = require("jsonwebtoken");
const JWTstrategy = require("passport-jwt").Strategy;
//We use this to extract the JWT sent by the user
const ExtractJWT = require("passport-jwt").ExtractJwt;

const router = express.Router();

// When the user sends a post request to this route, passport authenticates the user based on the
// middleware created previously
router.post(
  "/signup",
  passport.authenticate("signup", { session: false }),
  async (req, res, next) => {
    res.json({
      message: "Signup successful",
      user: req.user,
    });
  }

module.exports = router;

localStrategyAuth.js

const passport = require("passport");
const localStrategy = require("passport-local").Strategy;
const UserModel = require("../models/User");

//Create a passport middleware to handle user registration
passport.use(
  "signup",
  new localStrategy(
    {
      usernameField: "email",
      passwordField: "password",
    },
    async (email, password, done) => {
      try {
        // Save the information provided by the user to the the database
        const user = await UserModel.create({ email, password });
        // Send the user information to the next middleware
        return done(null, user);
      } catch (error) {
        done(error);
      }
    }
  )
);

这是我的快速路由器的样子：

const express = require("express");
const router = express.Router();

router.post(
  "/signup",
  passport.authenticate("signup", { session: false }),
  async (req, res, next) => {
    res.json({
      message: "Signup successful",
      user: req.user,
    });
  }
);

module.exports = router;

我错过了什么？我已经在 index.js 文件中设置了 CORS。我只是看不出我哪里错了。为什么我的 React 应用程序无法访问快速路由器端点。

如果我有一个普通的 express 端点，那么我的 react 应用程序就可以访问这些端点。例如，当我的 react 应用点击它时，下面的端点可以正常工作。

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();

app.post("/", (req, res) => {
  res.send("Hello World!");
});

const PORT = 5000;
app.listen(PORT, () =>
  console.log(`listening on port localhost:${PORT}`)

app.post("/someSignup", (req, res) => {
   console.log("signup");
 });

我也尝试过没有运气之类的事情：

const authRoutes = require("./routes/authRoutes");
authRoutes.use(cors());

这是我的 react 代码在提交 rest 调用时的样子：

  // axios setup
axios.create({
  baseURL: "http://localhost:5000",
  // headers: {
  //   "Content-Type": "application/json",
  // },
});

  // Handle submit
  handleSubmit = async (event) => {
    event.preventDefault();
    const newUserData = {
      // firstName: this.state.firstName,
      // lastName: this.state.lastName,
      email: this.state.email,
      password: this.state.password,
    };
    const result = await axios.post("/v1/signup", newUserData);
    console.log(result);
  };

这是 chrome 控制台上的 headers 选项卡的屏幕截图

这是 chrome 控制台上响应选项卡的屏幕截图

这是请求的屏幕截图

Answer 1

400 表示请求错误，您的问题与 cors 无关。 您没有设置您的 api 来处理响应发送的 JSON 数据，因此它无法读取您的 request.body 并给出 400-Bad Request。

所以你需要添加这一行：

app.use(bodyParser.json());

同样在当前版本的 express 中，body parser 不是必需的，它带有 express。所以你可以这样使用它：

app.use(express.json());

它与邮递员合作的原因是您以 x-www-form-urlencoded 发送数据。

Answer 2

您可以使用检查我的代码是否有 cors 错误。

const express = require('express');
var mongoose = require('mongoose');
const bodyParser = require('body-parser');
var morgan = require('morgan');
var cors = require('cors')
const app = express();

// CORS Middleware
app.use(cors());
// Logger Middleware
app.use(morgan('dev'));
// Bodyparser Middleware
app.use(bodyParser.json());


const MongoClient = require('mongodb').MongoClient;
const uri = "uri";
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });
client.connect(err => {
  console.log('MongoDB Connected...')
  const collection = client.db("dbname").collection("collectionname");

  app.post('/name', (req, res) => {
    collection. insertOne({ name: req.body.name })
    res.send("data added")
  });

});

const port = process.env.PORT || 5000;

app.listen(port, function () {
  console.log(`Example app listening on port ${port}`);
});

Answer 3

您需要将 cors 中间件注册到 express 应用中。

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();

app.use(cors());

app.post("/", (req, res) => {
  res.send("Hello World!");
});

const PORT = 5000;
app.listen(PORT, () => console.log(`listening on port localhost:${PORT}`)