快速路由器端点的 CORS 问题

Question

I have a react app that is making a REST to a an express node server.

The express router defines a bunch of rest endpoints.

When I hit the endpoints in the express router using postman, it works fine.

When I hit the endpoint with me react app, it doesn't. I'm seeing 400 error when my react app makes the call using axios.

This is what my index.js looks like:

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

This is what my express router looks like:

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;

What am I missing? I've set up CORS in the index.js file. I just can't see where I'm going wrong. Why cant my react app hit the express router endpoints.

If I have a normal express endpoint, then my react app is able to hit those endpoints. For example, the endpoint below works fine when my react app hits it.

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

I've also tried things like with no luck:

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

Here is what my react code looks like when it submits the rest call:

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

Here is a screenshot of headers tab on chrome console

Here is a screenshot of response tab on chrome console

Here is a screenshot of the request

Answer 1

400 means bad request, your problem isn't about with cors. You didn't setup your api to handle JSON data which react sends, so it can't read your request.body and gives 400-Bad Request.

So you need to add this line:

app.use(bodyParser.json());

Also in the current versions of express, body parser isn't required, it comes with express. So you can use it like this:

app.use(express.json());

The reason it worked with postman is that you sent the data in x-www-form-urlencoded.

Answer 2

you can use check my code for cors error.

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

You need to register the cors middleware into express app.

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}`)