Ошибка CORS с Express конечными точками маршрутизатора - PullRequest
0 голосов
/ 05 апреля 2020

У меня есть приложение реагирования, которое выполняет REST для сервера узла express.

Маршрутизатор express определяет группу конечных точек отдыха.

Когда я нажимаю Конечные точки в роутере express используют почтальон, все работает нормально.

Когда я нажимаю на конечную точку со своим приложением реакции, это не так. Я вижу ошибку 400, когда мое приложение реагирует на вызов с помощью ax ios.

. Так выглядит мой индекс. 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);
      }
    }
  )
);

Вот как выглядит мой express маршрутизатор:

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;

Чего мне не хватает? Я настроил CORS в файле index. js. Я просто не вижу, где я иду не так. Почему мое приложение реакции не может достичь конечных точек express.

Если у меня нормальная конечная точка express, то мое приложение реагирования может достичь этих конечных точек. Например, нижеприведенная конечная точка работает нормально, когда мое приложение реагирует на нее.

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

Вот то, что мой код реагирования выглядит, когда он отправляет оставшийся вызов:

  // 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 консоли enter image description here

Вот скриншот Вкладка ответа на chrome консоли enter image description here

Вот скриншот запроса enter image description here

Ответы [ 3 ]

1 голос
/ 05 апреля 2020

400 означает плохой запрос, ваша проблема не связана с cors. Вы не настроили свой API для обработки JSON данных, которые реагируют на отправку, поэтому он не может прочитать ваш request.body и выдает 400-Bad Request.

Так что вам нужно добавить эту строку:

app.use(bodyParser.json());

Также в текущих версиях express анализатор тела не требуется, он поставляется с express. Таким образом, вы можете использовать его следующим образом:

app.use(express.json());

Причина, по которой он работал с почтальоном, заключается в том, что вы отправили данные в x- www-form-urlencoded.

enter image description here

0 голосов
/ 05 апреля 2020

Вы можете использовать проверить мой код на наличие ошибки 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}`);
});
0 голосов
/ 05 апреля 2020

Вам необходимо зарегистрировать промежуточное программное обеспечение 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}`)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...