如何解决 Mern Stack 应用程序连接失败错误答案

【问题标题】：how to resolve Mern Stack app connection Failed error如何解决 Mern Stack 应用程序连接失败错误
【发布时间】：2021-09-15 16:03:07
【问题描述】：

加载资源失败：net::ERR_CONNECTION_REFUSED 收到此错误。另一个是未捕获（承诺）错误：网络错误在 createError (createError.js:16) 在 XMLHttpRequest.handleError (xhr.js:84) 请告诉我有关此问题的更多信息，我该如何解决此错误。

客户端 app.js 文件

import { useState } from 'react';
import './App.css';
import Axios from 'axios';

function App() {

  const [foodname,setFoodName]  = useState("");
  const [days,setDays] = useState(0);

  const addToList = () =>{
    Axios.post("http://localhost:3001/insert", {
      foodname: foodname,
      days: days
    });
  };

  return (
    <div className="App">
        <h1>CRUD APP WITH MERN</h1>

        <label>Enter Food Name:</label>
        <input 
          type="text" 
          onChange={(event) => {
            setFoodName(event.target.value);
          }}/>
        <label>Days Since I Ate:</label>
        <input 
          type="number"
          onChange={(event) => {
          setDays(event.target.value);
          }}/>

        <button onClick={addToList}>Add to List</button>
    </div>
  );
}

export default App;

服务器端 index.js 文件

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();

const FoodModel = require("./models/Food");

app.use(express.json());
app.use(cors());

mongoose.connect("mongodb+srv://crudop:crudop@crud.jmbry.mongodb.net/food?retryWrites=true&w=majority",{
    useNewUrlParser: true,
    useUnifiedTopology: true
}); 

app.post('/insert',async (req,res)=>{

    const FoodName = req.body.foodname;
    const days = req.body.days;

    const food = new FoodModel({foodname: FoodName, daysSinceIAte:days});

    try{
        await food.save();
        res.send("inserted");
    }
    catch(err){
        console.log(err);
    }
});

app.listen(3001, ()=>{
     console.log("server is running on port 3001...");
})

【问题讨论】：

标签： javascript node.js reactjs mongodb express

【解决方案1】：

等待 MongoDB 连接之后开始监听端口

    mongoose
   .connect(DB_URL, {
       useUnifiedTopology: true,
       useNewUrlParser: true,
    })
   .then((result) => {
         app.listen(3001, () => {
    console.log("Server started on port 3001");
    });
  })
  .catch((err) => console.log(err));

【讨论】：