Vue项目中Axios请求Node服务遇ERR_NETWORK错误求助

一、ERR_NETWORK错误排查与修复 #

1. 配置跨域（CORS） #

Express默认拦截跨域请求，必须先配置CORS：

• 安装依赖：npm install cors
• 在server.js中引入并启用：

  const cors = require('cors');
  // 开发环境允许所有前端地址请求
  app.use(cors());
  // 生产环境建议限制指定地址，例如Vue开发服务器
  // app.use(cors({ origin: 'http://localhost:5173' }));
  

• 重启Express服务后重新测试请求

2. 校验Axios基础URL #

打开http-common.js，确认baseURL完全匹配后端服务地址：

import axios from "axios";
export default axios.create({
  // 需和server.js监听的端口、路由前缀一致
  baseURL: "http://localhost:3000/api",
  headers: { "Content-type": "application/json" }
});

• 比如后端监听3000端口、路由前缀是/api，这里不能写错端口或路径

3. 避免前后端端口冲突 #

• Express默认端口多为3000，Vue3开发服务器默认是5173、Vue2是8080，若两者端口重复，修改其中一个：
  • 修改Express端口：在server.js中改成app.listen(3001, ...)，同步更新Axios的baseURL
  • 修改Vue端口：在vite.config.js（Vue3）或vue.config.js（Vue2）中配置新端口

4. 直接验证后端接口 #

在浏览器地址栏输入后端接口地址（例如http://localhost:3000/api/events），如果无法返回数据，说明后端路由或数据库连接存在问题，检查server.js中的路由定义、数据库配置是否正确。

二、关于导入server.js到Vue组件的问题 #

绝对不能直接导入，核心原因：

• server.js是Node.js后端代码，依赖Node内置模块（如express、mysql）和后端运行环境，而Vue组件运行在浏览器前端，没有Node.js环境，无法解析这些模块
• 前后端是完全分离的运行环境，前端只能通过HTTP请求与后端交互，不能直接导入执行后端代码

正确做法：

• 在server.js中将所需逻辑封装为API接口（如GET/POST/PUT/DELETE路由）
• 在Vue组件中通过Axios发送HTTP请求调用这些接口

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