MERN栈前后端通过axios连接时出现Network Error报错求助

我正在开发一款Web应用，后端采用Express、MongoDB、Node.js搭建，前端基于React.js实现。单独执行nodemon server.js命令启动后端时，服务运行完全正常，但前端通过axios发起请求对接后端时，会抛出Network Error错误。
以下为项目相关代码：

server.js（服务入口连接配置） #

import cors from "cors";
import userquery from "./student/api/query.routes.js";
import admin from "./admin/api/admin.routes.js";
const app = express(); 
app.use(cors()); 
app.use(express.json()); 
app.use("/api/v1/user", userquery);  
app.use("/api/v1/admin", admin);
app.use("*", (req, res) => {
  res.status(404).json({ error: "not found" });
}); 
export default app;

query.routes.js（用户侧路由配置） #

import QueryCtrl from "./query.controller.js";
import personalQueriesCtrl from "./personalQueries.controller.js";
import SubjectCtrl from "./subject.controller.js";
import UserCtrl from "./user.controller.js";
const router = express.Router(); //creates routes people can go to
router.route("/").get(QueryCtrl.apiGetQueries);
router.route("/signup").post(UserCtrl.apiPostUser);
router.route("/subjects").get(SubjectCtrl.apiGetSubjects);
router.route("/AskQuery").post(personalQueriesCtrl.apiPostQuery);
export default router;

http-common.js（axios实例配置） #

export default axios.create({
  baseURL: "http://localhost:5000/api/v1/user/",
  headers: {
    "Content-type": "application/json",
  },
  proxy: false,
});

按优先级从高到低排查以下问题：

• 先确认后端真的在5000端口正常监听
  你贴的server.js代码里只有app实例的导出，没有app.listen(5000)的端口监听逻辑。如果你的监听逻辑写在其他入口文件里，先确认启动命令是否真的执行了监听逻辑：
  • 看nodemon的启动日志，有没有明确打印Server running at http://localhost:5000类似的提示
  • 新开终端执行curl http://localhost:5000/api/v1/user，如果返回连接拒绝，说明后端根本没在5000端口提供服务，和前端代码无关。如果返回404或者正常的查询结果，说明后端服务正常，再往下查。
• 核对请求报错的具体类型
  打开浏览器开发者工具的Network面板，找到失败的请求，看具体错误码：
  • 如果是net::ERR_CONNECTION_REFUSED：还是后端端口没对上，要么后端没启动，要么你axios里写的端口和后端实际监听的端口不一致（比如后端实际跑在3000/8000，你写了5000）
  • 如果是net::ERR_BLOCKED_BY_CLIENT：被浏览器插件（广告拦截、安全插件、HTTPS强制跳转插件）拦截了，临时禁用所有插件再试
  • 如果是CORS相关报错：检查你有没有在其他中间件/路由里手动设置响应头覆盖了cors中间件的配置，比如单独写了res.header("Access-Control-Allow-Origin", "*")但没写全允许的方法/头，反而导致跨域校验失败。
• 修正axios无效配置
  你配置里的proxy: false是Node.js环境下axios才会识别的配置，浏览器环境下会直接忽略，这个字段可以删掉，避免不必要的干扰。
  另外注意baseURL末尾带了斜杠，后续发请求的时候不要在路径开头重复加斜杠，避免出现双斜杠的异常路径（比如拼成http://localhost:5000/api/v1/user//subjects）。
• 开发环境推荐用代理转发避免跨域
  如果是create-react-app搭建的项目，不用在axios里写死后端地址，直接在前端项目的package.json里加一行：

  "proxy": "http://localhost:5000"
  

  然后把axios实例的baseURL改成/api/v1/user即可，开发环境下webpack会自动把接口请求转发到后端服务，彻底避免本地开发的跨域问题。

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