Axios报错Network Error的全面排查与解决方案

5 次阅读

Axios报错Network Error的全面排查与解决方案

Axios作为前端开发中常用的HTTP请求库，凭借简洁的API和强大的拦截器机制，被广泛应用于Vue、React、Node.js等项目中。但在实际开发过程中，很多开发者都会遇到一个令人困惑的问题：Axios请求失败，并提示Network Error。

与常见的404、500等HTTP状态码不同，Axios的Network Error通常意味着请求根本没有正常完成，浏览器没有收到有效响应。造成该问题的原因较多，包括跨域配置、网络环境、接口地址错误、服务器异常、HTTPS协议问题等。

本文将从常见原因、排查流程以及具体解决方案几个方面，系统分析Axios报错Network Error的处理方法。

一、Axios Network Error错误表现

Axios请求失败时，通常会出现类似错误：

JavaScript
AxiosError: Network Error

或者控制台显示：

Uncaught (in promise) AxiosError: Network Error

例如：

JavaScript
axios.get('http://localhost:8080/api/user')
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.log(err);
  });

返回：

Error: Network Error

此时查看错误对象：

JavaScript
{
  message: "Network Error",
  code: "ERR_NETWORK"
}

需要注意的是，Network Error并不一定代表真实的网络断开，它更多表示：

  • 请求发送失败；

  • 浏览器阻止请求；

  • 服务端没有返回有效响应；

  • Axios无法获取响应数据。

二、检查接口地址是否正确

接口地址错误是最常见的问题之一。

例如：

JavaScript
axios.get('http://127.0.0.1:3000/user')

如果后端实际运行地址是：

http://localhost:8080/user

那么请求自然无法成功。

常见错误包括：

1. 端口号错误

前端：

JavaScript
axios.defaults.baseURL = 'http://localhost:8080';

后端：

8081端口启动

此时请求会失败。

解决方法：

确认后端服务监听端口：

Spring Boot：

properties
server.port=8080

Node.js：

JavaScript
app.listen(3000);

保持前后端地址一致。

2. IP地址配置错误

开发环境中经常出现：

JavaScript
localhost

和：

JavaScript
127.0.0.1

混用的问题。

例如：

前端运行：

http://localhost:5173

后端监听：

http://127.0.0.1:8080

部分环境下可能出现访问异常。

建议统一：

JavaScript
axios.defaults.baseURL = 'http://localhost:8080';

三、跨域导致Axios Network Error

跨域是Axios出现Network Error最主要原因之一。

浏览器为了安全，会限制不同源之间的请求。

例如：

前端：

http://localhost:5173

后端：

http://localhost:8080

虽然都是本机，但是端口不同，也属于跨域。

浏览器控制台可能出现：

Access to XMLHttpRequest has been blocked by CORS policy

Axios最终表现：

Network Error

四、解决CORS跨域问题

方法一：后端开启跨域

以Spring Boot为例：

Java
@RestController
@CrossOrigin(origins = "*")
public class UserController {

    @GetMapping("/user")
    public String user(){
        return "success";
    }
}

或者全局配置：

Java
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter(){

        CorsConfiguration config = new CorsConfiguration();

        config.addAllowedOriginPattern("*");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");

        UrlBasedCorsConfigurationSource source =
                new UrlBasedCorsConfigurationSource();

        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);
    }
}

方法二：Vue项目配置代理

开发环境推荐使用代理。

Vue3：

JavaScript
server:{
    proxy:{
        '/api':{
            target:'http://localhost:8080',
            changeOrigin:true,
            rewrite:path=>path.replace(/^/api/,'')
        }
    }
}

请求：

JavaScript
axios.get('/api/user')

由开发服务器转发请求。

五、HTTPS协议不匹配导致Network Error

如果页面使用HTTPS：

https://example.com

请求：

http://api.example.com

浏览器会阻止混合内容请求。

控制台可能显示：

Mixed Content: The page was loaded over HTTPS

解决方案：

方案一

接口升级HTTPS：

https://api.example.com

方案二

开发环境统一协议：

http://localhost

避免HTTPS和HTTP混用。

六、后端服务没有启动

Axios请求依赖后端接口，如果服务器没有运行，也会出现Network Error。

检查方式：

使用浏览器访问接口

直接打开：

http://localhost:8080/api/user

如果无法访问：

说明后端服务异常。

查看端口占用

Windows：

Shell
netstat -ano | findstr 8080

Linux：

Shell
lsof -i:8080

确认服务是否正常监听。

七、防火墙或代理导致请求失败

某些开发环境存在：

  • 公司代理服务器；

  • VPN软件；

  • 防火墙策略；

  • 浏览器安全插件。

这些都会导致Axios请求失败。

排查方法：

关闭代理测试

Chrome：

设置 → 系统 → 打开计算机代理设置

检查：

代理服务器

是否开启。

使用curl测试接口

例如：

Shell
curl http://localhost:8080/api/user

如果curl可以访问，而浏览器失败，通常是浏览器环境问题。

八、请求超时导致Network Error

Axios默认超时时间较长，但项目中通常会设置：

JavaScript
axios.create({
    timeout:5000
});

如果服务器响应超过5秒：

Network Error

解决：

增加超时时间：

JavaScript
const service = axios.create({
    timeout:30000
});

同时优化后端接口响应速度。

九、检查Axios请求配置

错误配置也可能导致请求失败。

例如：

JavaScript
axios({
    method:'post',
    url:'/login',
    data:user
});

后端要求：

application/json

但是发送格式错误。

可以明确设置：

JavaScript
axios.post(
    '/login',
    user,
    {
        headers:{
            'Content-Type':'application/json'
        }
    }
);

十、通过浏览器Network面板定位问题

遇到Axios Network Error时，不要只看代码报错。

建议打开：

F12 → Network

重点查看：

1. 请求是否发送

如果没有请求记录：

说明浏览器直接拦截。

可能原因：

  • CORS；

  • Mixed Content；

  • URL错误。

2. 请求状态

常见情况：

状态原因
404接口地址错误
500服务器异常
401权限认证失败
Pending接口未响应
Blocked浏览器阻止

3. Response信息

查看：

  • Response Headers；

  • Request Headers；

  • Preview。

可以快速定位问题。

十一、Axios拦截器统一处理Network Error

项目中可以通过响应拦截器统一处理。

示例：

JavaScript
axios.interceptors.response.use(
    response=>{
        return response;
    },
    error=>{

        if(error.message === 'Network Error'){
            console.log('网络连接异常');
        }

        return Promise.reject(error);
    }
);

进一步优化：

JavaScript
axios.interceptors.response.use(
    res=>res,
    err=>{

        if(!err.response){

            console.log(
                '服务器无法连接，请检查网络'
            );

        }else{

            switch(err.response.status){

                case 401:
                    console.log('登录过期');
                    break;

                case 500:
                    console.log('服务器错误');
                    break;
            }
        }

        return Promise.reject(err);
    }
);

十二、移动端Axios Network Error排查

在UniApp、React Native等移动端项目中，还需要关注：

1. localhost问题

手机访问：

JavaScript
http://localhost:8080

实际上访问的是手机自身。

应该改为电脑局域网IP：

例如：

JavaScript
http://192.168.1.100:8080

2. Android明文HTTP限制

Android 9以后默认禁止HTTP请求。

需要配置：

XML
android:usesCleartextTraffic="true"

或者使用HTTPS接口。

十三、Axios Network Error快速排查流程

遇到问题时，可以按照以下顺序：

第一步：确认后端是否启动

访问接口地址。

第二步：检查URL

确认：

  • 域名；

  • IP；

  • 端口；

  • 路径。

第三步：查看浏览器控制台

重点关注：

  • CORS；

  • Mixed Content；

  • Failed to load resource。

第四步：检查跨域配置

确认后端允许：

  • 请求来源；

  • 请求方法；

  • 请求Header。

第五步：检查网络环境

排查：

  • VPN；

  • 代理；

  • 防火墙。

第六步：使用Postman测试

如果Postman成功：

说明后端正常，重点检查前端环境。

如果Postman失败：

说明后端接口存在问题。

总结

Axios报错Network Error并不是单纯的网络断开，而是一类请求无法正常完成的综合性错误。实际开发中，最常见原因包括接口地址错误、跨域限制、后端服务未启动、HTTPS协议问题以及代理环境异常。

排查Axios Network Error时，应优先通过浏览器Network面板确认请求状态，再结合后端日志、跨域配置和网络环境逐步定位。建立完善的Axios错误处理机制，也能够提升前端项目的稳定性和用户体验。

文章标签
Axios Network Error 前端请求 跨域解决方案 HTTP请求