MERN栈React应用数据无法提交数据库，Axios报连接拒绝错误求助

问题本质 #

net::ERR_CONNECTION_REFUSED 说明前端无法和后端服务建立连接，优先排查后端运行状态、端口匹配性，再修复代码逻辑漏洞。

分步排查与修复 #

1. 确认后端服务正常运行 #

• 启动后端后，检查控制台是否输出 Server is up and running on port: 8071 和 Mongodb Connection success!
• 若无输出，先安装缺失依赖：在后端目录执行 npm install express mongoose body-parser cors dotenv
• 确保.env文件存在且配置正确，至少包含 PORT=8071 和有效的 MONGODB_URL（如本地数据库：mongodb://localhost:27017/your-db-name）

2. 修复前端组件的缺失导入 #

你的AddSupplier.js使用了useState但未导入，会导致组件报错并中断请求逻辑：

// 补充导入useState
import { useState } from "react";
import AdminDashBoard from "./AdminDashBoard";
import axios from "axios";

3. 验证后端路由是否存在 #

确保./routes/suppliers.js中定义了/add的POST路由，示例正确实现：

const express = require("express");
const router = express.Router();
const Supplier = require("../models/Supplier"); // 需对应你的模型文件

router.post("/add", async (req, res) => {
  try {
    const newSupplier = new Supplier(req.body);
    await newSupplier.save();
    res.status(200).json("供应商添加成功");
  } catch (err) {
    res.status(400).json("错误：" + err);
  }
});

module.exports = router;

4. 优化CORS配置（可选） #

为避免跨域问题，可明确配置允许前端域名：

// 替换原app.use(cors())
app.use(cors({
  origin: "http://localhost:3000",
  credentials: true
}));

5. 直接测试接口连通性 #

• 在浏览器访问http://localhost:8071/supplier/add，若返回405（方法不允许），说明后端服务正常；若提示无法访问，说明后端未启动或端口错误
• 用Postman发送POST请求到该地址，携带测试数据，验证接口是否能正常写入数据库

额外注意事项 #

• 若使用本地MongoDB，需确保MongoDB服务已启动
• 前端请求的端口8071必须和后端启动端口完全一致，避免硬编码错误
• 检查本地防火墙或代理工具是否拦截了8071端口的请求

内容的提问来源于stack exchange，提问作者fazla mac