Network Error AxiosError: Network Error at XMLHttpRequest.handleError

问题遇到的现象和发生背景

这是在做b站黑马程序员vue2购物车案例时遇到关于axios网络问题，前一天还没事，在今天做的时候安装了axios，就出现了这个问题。

img

img

这是axios发送get请求的代码

img

这张图片是之前没有的问题，可能是这次问题的原因

img

v：a1902247768

你的后端服务启动了吗?你最后一张图时警告非错误,不影响的

www.liulangbing.top？这个你换成 localhost 看看，如果是本机测试的话

是否这个外网网站锁住了跨域访问？

请求超时，你可以在axios里设置一个超时参数，设大一点试试

这个异常通常表示在使用 Axios 发送网络请求时，浏览器无法与服务器建立连接或发送请求时发生了错误。主要原因可能包括以下内容：

  1. 网络连接问题：例如，您的计算机或路由器是否正确连接到网络？是否存在防火墙或其他安全软件已经阻止了该请求？

  2. 跨域问题：如果您正在跨域发送请求，则服务器可能需要通过 CORS（跨域资源共享）来允许浏览器从其他源加载数据。

  3. 服务器响应错误：在服务器返回错误 HTTP 状态码（如 404、500 等）或无法正常处理请求时，会导致此错误。

针对以上问题，可以尝试执行以下操作：

  1. 检查网络连接和安全软件以确定是否阻止了请求。您可以尝试其他网站或测试工具来验证网络连接是否正常。

  2. 检查是否允许跨域请求。您可以在服务器端启用 CORS 或使用代理（如webpack-dev-server 配置 proxy 来解决跨域问题。

  3. 检查 API 接口是否存在问题或在响应中指定了错误状态码，如果是，请联系接口提供者并解决该问题。

除此之外，也可以通过在代码中捕获异常并进行相应的处理来预防这种情况的发生：

axios.get('https://www.example.com/api').then((response) => {
  // 执行正常逻辑
}).catch((error) => {
  if (error.response) {
    // 响应非 2xx 状态码的情况处理
  } else if (error.request) {
    // 没有响应返回的情况下处理
  } else {
    // 可能是请求取消或网络问题
  }
});

希望这个回答对您有所帮助！