使用Axios调用服务器时出现[AxiosError: Network Error]问题求助

问题背景 #

服务器端基于Express配置的路由接口在Postman中可正常调用，但客户端通过Axios发起请求时，终端抛出Network Error，无法完成连接。

服务器端代码 #

主入口路由挂载（index.js）

app.use("/api/v3", routes);

路由分发文件（routes.js）

const express = require("express");
const { Router } = express;
const router = Router();
const userRoutes = require("./User");
router.use("/users", userRoutes);
module.exports = router;

用户注册接口（User.js）

router.post("/signup", async (req, res) => {      
  try {
    const { username, email, password, firstName, lastName } = req.body;
    const { user, token } = await createUser(
      username,
      email,
      password,
      firstName,
      lastName
    );
    res
      .status(200)
      .json({ message: "User registered successfully", user, token });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

注：createUser 负责将用户信息存入数据库，Postman调用 http://localhost:3000/api/v3/users/signup 可正常返回结果。

客户端代码 #

Axios实例配置（api.js）

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3000/api/v3/',
});

// api.defaults.headers.common['Authorization'] = 'Bearer your-token';

export default api;

注册调用函数

const createUser = async (username, email, password, firstName, lastName) => {
  try {
    const response = api.post('users/signup', {
      username,
      email,
      password,
      firstName,
      lastName,
    });

    console.log('ff', (await response).data);

    const {token, user} = response.data;
    auth.setToken(token);
    return user;

  } catch (error) {
    console.log('kk', error.message);
    throw error;
  }
};

错误信息 #

调用注册函数时终端输出：

kk Network Error
[AxiosError: Network Error]

排查步骤 #

1. 解决跨域问题
   Express默认未配置跨域支持，若客户端与服务器端口/域名不同，会被浏览器拦截。安装并启用cors中间件：

   // 在index.js中添加
   const cors = require('cors');
   app.use(cors());
   

   如需严格控制访问来源，可指定允许的前端地址：

   app.use(cors({ origin: 'http://localhost:3001' })); // 替换为你的前端实际地址
   

2. 修正异步请求处理逻辑
   现有代码中api.post未加await，导致response.data取值时仍为Promise对象，虽不直接引发网络错误，但会导致后续逻辑异常，建议修正：

   const response = await api.post('users/signup', {
     username,
     email,
     password,
     firstName,
     lastName,
   });
   console.log('ff', response.data);
   const {token, user} = response.data;
   

3. 确认服务端运行状态与地址匹配

   • 检查服务器是否正常启动在localhost:3000，端口未被占用。
   • 若前端部署在非本地环境，将baseURL中的localhost替换为服务器公网IP或域名。

4. 查看浏览器网络请求详情
   打开浏览器开发者工具（F12）→ Network标签，查看请求：

   • 若显示CORS相关错误，说明跨域配置未生效。
   • 确认请求地址是否为http://localhost:3000/api/v3/users/signup，与Postman一致。

5. 排查前端代理冲突
   若前端使用脚手架（如React/Vue），检查是否配置了代理（如package.json的proxy或vue.config.js的代理规则），避免与Axios的baseURL产生冲突。

6. 测试简化版请求
   编写最简请求排除逻辑干扰：

   import api from './api';
   
   const testRequest = async () => {
     try {
       const res = await api.post('users/signup', {
         username: 'test',
         email: 'test@test.com',
         password: '123456',
         firstName: 'test',
         lastName: 'user'
       });
       console.log(res);
     } catch (e) {
       console.log(e);
     }
   };
   testRequest();
   

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