为啥我无法让我的后端文件 server.js 连接到前端？错误：POST http://localhost:3000/api/person/add 400（错误请求）？

Posted 2023-02-22

【中文标题】为啥我无法让我的后端文件 server.js 连接到前端？错误：POST http://localhost:3000/api/person/add 400（错误请求）？

【英文标题】：Why could I not get my backend file, server.js, to connect to a front-end?Error: POST http://localhost:3000/api/person/add 400 (Bad Request)?为什么我无法让我的后端文件 server.js 连接到前端？错误：POST http://localhost:3000/api/person/add 400（错误请求）？

【发布时间】：2021-11-07 07:52:28

【问题描述】：

我的服务器端文件，这是 server.js 文件 这是我需要后端文件的包

require("dotenv").config();
const express  = require("express");
const mongoose = require("mongoose");
// const cors     = require("cors");
const path     = require("path");
const app      = express();
 

这是我处理 mongodb 的地方

// const PORT     = process.env.PORT || 4000;
const DB_URI   = "mongodb://localhost:27017/"
const DB       = "reactDB";
 
// Middleware
app.use(express.json());
app.use(express.urlencoded( extended: true ));
// app.use(cors());
 
// Establish DB connection
mongoose.connect(DB_URI + DB, 
   useUnifiedTopology: true,
   useNewUrlParser: true,
   useCreateIndex: true,
   useFindAndModify: false,
   connectTimeoutMS: 10000
);
 
const db = mongoose.connection;
 
// Event listeners
db.once('open', () => console.log(`Connected to $DB database`));
 
// Create Schema
let PersonSchema = new mongoose.Schema(
   
      forename: String,
      age: Number
   ,
    collection: "people" 
);
 
// Create Model
let PersonModel = db.model("PersonModel", PersonSchema);
 
// Route to Get all People

由于错误是发布请求错误，它可能是什么 这里也是。

app.get("/api/people", (req, res) => 
   PersonModel.find(, __v: 0, (err, docs) => 
      if (!err) 
         res.json(docs);
       else 
         res.status(400).json("error": err);
      
   );
)

我无法处理此发布请求。不知道为什么？

// Route to Add a Person
app.post("/api/person/add", (req, res) => 
   let person = new PersonModel(req.body);
   
   person.save((err, result) => 
      if (!err) 
        //   console.log("The result._doc.__v is "+result._doc.__v);
         delete result._doc.__v;
         res.json(result._doc);
        //  console.log("The result._doc is " + result._doc);
       else 
         res.status(400).json("error": err);
      
   );
)
 
app.listen(4000, () => 
   console.log(app.get("env").toUpperCase() + " Server started on port " );
);

The front-end is created by React, and all the input are showing, but when I click the add button, everything that I have typed disappear.

这是前端文件。

import React,  useState, useEffect  from "react";
import Person from "./Person";
import axios from "axios";
 
/*** Remember that the proxy to the backend server is http://localhost:4747 ***/
 
const defaultPerson = 
  forename: "",
  age: "",
;
 
function App() 
  const [person, setPerson] = useState(defaultPerson);
  const [people, setPeople] = useState([]);
 
  /*
    Fetch all People the moment this App component loads for the first time
    Notes: The proxy enables us to use axios without the full url http://localhost:4747/api/people
           The empty array [] parameter ensures that the code inside useEffect() runs once
  */
  useEffect(() => 
    axios.get("/api/people")
      
      .then((res) => setPeople(res.data))
      
      .catch((err) => console.error(err));
  , []);
 
  function handleChange(event) 
    const  name, value  = event.target;
 
    setPerson( ...person, [name]: value );
  
 
  /*
    Add a person to DB and update state
    Notes: The proxy enables us to use axios without the full url http://localhost:4747/api/person/add
  */
  function addPerson(newPerson) 
    axios.post("/api/person/add", newPerson)
      .then((res) => setPeople([...people, res.data]))
      .catch((err) => console.log(err));
  
 
  return (
    <>
      <form onSubmit=(e) => e.preventDefault()>
        <input
          name="forename"
          type="text"
          placeholder="Enter your Forename"
          value=person.forename
          onChange=handleChange
        />
        <input
          name="age"
          type="text"
          placeholder="Age"
          value=person.age
          onChange=handleChange
        />
        <button
          onClick=() => 
            if (person.forename && person.age) 
              addPerson(person);
              setPerson(defaultPerson);
            
          
        >
          Add
        </button>
        people.map((person) => (
          <Person
            key     =person._id
            _id     =person._id
            forename=person.forename
            age     =person.age
          />
        ))
      </form>
    </>
  );

 
export default App;

【问题讨论】：

根据app.listen，您正在侦听端口 4000，而不是 3000，

【参考方案1】：

您正在侦听端口 4000。将其更改为端口 3000，或者在您的 URL 中使用 :4000。

【讨论】：

我不能因为我的 reactjs 使用端口 3000，我的前端文件。

然后更改您的帖子以前往 4000 端口。

Huthaifa Muayyad - 如果你认为这是问题所在，我会这么做的。

另外，当我在终端运行所有内容时，甚至没有创建 mongodb 数据库，所以请有人帮助我。

【参考方案2】：

您并没有告诉您的反应应用程序在哪里进行端点调用 - 所以它使用自己作为参考。这就是为什么当您在端口 3000 中启动 React 应用程序时，axios 会调用所有 localhost:3000

如果您使用的是 Create React App，一个解决方案是在您的 package.json 中添加以下行：“proxy”: “http://localhost:4000”。否则，您需要将整个数据提供给axios，例如axios.get(http://localhost:4000/api/people；或查看代理您的应用和服务器的不同方式。

【讨论】：

我确实在我的反应的 package.json 中添加了它，但它仍然是这个。结果。

嗯，这不在最初的问题中。有些东西使请求转到端口 3000 而不是 4000。我唯一能想到的就是我发布的内容，尝试将整个 url 放入 axios 请求中，然后从那里开始调试可能出现错误的位置。