VUE_axios请求错误处理Uncaught runtime errors: XMLHttpRequest.handleError (webpack-internal:///./node_modul

最新推荐文章于 2025-04-27 17:37:49 发布
最新推荐文章于 2025-04-27 17:37:49 发布
阅读量2k 收藏 9
点赞数 13
分类专栏： # VUE 文章标签： vue.js webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44599931/article/details/136801029
版权
文章描述了在开发环境中遇到的全屏错误，该错误仅在打包前出现，且与Vue.config.js的devServer配置中的overlay有关。解决方案是修改或新建此文件，设置client对象的overlay属性为false。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 注：该问题只是出现在开发环境，打包后是不会出现的
    之前最多就是在控制台看到这种报错，当前报错是在页面全屏显示的
    在这里插入图片描述

解决方法：
修改根目录下vue.config.js文件，没有则新建
在这里插入图片描述

configureWebpack: {
	devServer: {
		client: {overlay: false}
	}
}
axios请求错误报错Uncaught runtime errors:
01-12 2011
解决axios请求错误报错Uncaught runtime errors每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，一起交流指正。系列文章会不段更新 来个打赏(微信) 马力全开 撸起袖子加油干~
techQ&A · Vue项目axios请求时报错Network Error at createError at XMLHttpRequest.handleError
热门推荐
qq_41113339的博客
09-23 4万+
Vue项目axios请求时报错Network Error at createError at XMLHttpRequest.handleError错误解决可能的原因一解决方案可能的原因二解决方案 错误 Vue项目axios请求时报错： Error: Network Error at createError (https://localhost:3000/node_modules/.vite/axios.js?v=2d671dec:333:19) at XMLHttpRequest.handleError
vue ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-
cdfdfgrd的博客
05-06 1710
vue ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-
Uncaught runtime errors:×ERRORNetwork Error AxiosError: Network Error at XMLHttpRequest.handleErro
最新发布
qq_75136161的博客
04-27 204
在vue.config.js中添加。
前端报错ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-interna
weixin_48809422的博客
10-14 5524
解决方法： 给后端项目配置跨域资源共享（CORS）策略。
react axios请求报错，全屏展示Uncaught runtime errors:
m0_59148573的博客
11-03 2345
2.找到config下webpackDevServer.config.js,然后按下图去改。原因：webpack-dev-server。解决方法：1.npm run eject。
axios请求错误处理Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server
weixin_46525113的博客
05-25 2万+
axios请求错误封装处理，全屏弹出Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server控制台也会全部展示
使用axios请求线上接口出现 Uncaught (in promise) Error: Error错误
莫小文的博客
11-03 1万+
此接口是我自定义的线上接口
Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError
qq_36632604的博客
07-07 8284
跨域访问问题 主controller加 @CrossOrigin注解
解决：Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
qq_53376718的博客
12-20 1万+
Uncaught runtime errors:ERRORNetwork Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:160:14)
Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError (xhr.js
amy_000_的博客
07-19 3万+
环境： react create-react-app axios 跨域访问 解决参考： 适用于vue https://blog.csdn.net/yuanlaijike/article/details/80522621 适用于react https://www.cnblogs.com/zengjielin/p/9342515.html ...
vue前后端相连接报错：Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
m0_74132943的博客
10-15 1万+
其实这个错误不要害怕；因为这是你很可能是你的..........这个错误通常是由于前端无法访问到后端接口..................................
Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
wxy95279的博客
08-20 816
Configuration // 这个注解就是告诉springboot在容器启动时依赖注入时给JavaBean的配置。// 添加分页过滤器，如果mybatisplus需要使用分页，boot必须添加这个配置。2.Controller类里面添加：@CrossOrigin。// 溢出总页数后是否进行处理。前端：使用axios向后端发送请求报错。后端接口：经过测试没有问题。1.添加跨域类（固定代码）
由AxiosError: Network Error at XMLHttpRequest.handleError 问题引发的反思，以及定位问题的思路
2301_78077004的博客
07-08 1257
今天由于到了一个这样的问题，然后也是费了半天，才找到原因，原因就是跨域问题,简单说下跨域，就是你的url中的协议、域名、端口号、这三者有任意的一个不同的话，就会出现跨域问题，因此你只需要在后端的cotroller层中加一个@CrossOrigin注解就行，如下图所示。但是，我这里想说的，分析错误的思路,这是我最想分享的一点，大家觉得合适了，就自行选择,我将错误信息，打印在了前端的控制台中,于是就找到了错误！
axios 拦截错误
shibaweijin的博客
06-27 1066
拦截
ERROR [object Object] at handleError (webpack-internal:///./node_modules/webpack-dev-server/clie
qq_33240556的博客
06-04 2134
这看起来像是与webpack-dev-server相关的错误。通常情况下，这会发生在您的JavaScript代码或配置出现问题时。：如果您正在使用webpack-dev-server，请检查其配置选项。：如果您无法找出问题所在，尝试在线搜索特定的错误消息。：检查您浏览器的开发者控制台是否有其他错误消息。有时，由于依赖项过时或不兼容，可能会导致错误。如果您提供有关您的项目设置和具体错误消息的更多细节，我可以提供更有针对性的建议！：查看错误消息中提到的行附近的代码。确保它们已正确设置，并且配置中没有错误。
Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack）
u013798595的博客
02-29 1102
【代码】Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack）
XMLHttpRequest请求错误
weixin_45055317的博客
01-14 828
用goframe写了一个web服务框架，用dart写了个访问端，结果出现了XMLHttpRequest错误。其中，r.Response.CORSDefault()是关键。后来发现是跨域请求问题。
ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:158:14)怎么解决
03-29
<think>好的，我现在需要解决用户提出的Axios网络错误问题，尤其是在XHR适配器中出现的Network Error。首先，我得仔细分析用户提供的引用内容，看看有什么线索可以帮助解决这个问题。 用户引用了四个资料，其中提到适配器的实现、自定义适配器处理请求、XHR适配器中的事件处理等。比如，引用[2]提到自定义适配器可以接管请求和响应，这可能涉及到如何处理网络请求的问题。引用[3]和[4]则涉及XHR适配器的具体实现，特别是事件处理和错误处理部分。 首先，Axios的Network Error通常发生在无法建立连接的时候，比如跨域问题、服务器未响应、网络断开等。需要检查这些常见原因。此外，XHR适配器中的错误处理是否完善，比如是否正确处理了超时、错误事件等。 根据引用[3]，XHR适配器处理onload事件或使用onreadystatechange模拟onload，这可能涉及到请求状态的判断。如果请求没有正确完成，可能会导致Network Error。例如，在onerror或ontimeout事件中没有正确处理错误信息，导致Axios无法捕获正确的错误原因。 另外，引用[2]提到自定义适配器时可能需要删除配置中的适配器以避免死循环。如果用户自定义适配器时没有正确配置，可能会引发问题。比如，在自定义适配器中未正确调用默认适配器，或者处理配置时遗漏某些参数，导致请求无法正确发送，从而触发Network Error。 接下来，我需要综合这些信息，逐步分析可能的原因和对应的解决方案。可能的步骤包括检查网络连接、跨域配置、超时设置，查看XHR适配器中的错误处理逻辑，以及自定义适配器的正确实现等。同时，参考用户提供的资料中的适配器实现方法，确保请求配置正确，错误事件被妥善处理。 最后，需要验证这些解决方案是否有效，比如通过示例代码展示如何正确配置超时、处理CORS，或者如何自定义适配器以避免死循环。确保用户能够按照步骤排查和解决问题，并引用相关资料中的方法作为支持。</think>### 解决Axios Network Error (XHR适配器)的分步指南 #### 1. 基础网络检查 - **网络连通性验证**：使用`navigator.onLine`检测客户端在线状态 - **服务可达性测试**：通过curl或Postman直接测试接口 ```javascript // 前端网络状态检测示例 if (!navigator.onLine) { console.error('网络连接已断开'); } ``` #### 2. CORS跨域问题排查（最常见原因） - 服务端必须返回正确的CORS头： ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST Access-Control-Allow-Headers: Content-Type, Authorization ``` - 预检请求处理：对OPTIONS请求返回204状态码[^3] #### 3. 超时配置优化 ```javascript // 显式设置超时（单位：毫秒） axios({ method: 'get', url: '/api', timeout: 15000, // 推荐15秒内 adapter: 'xhr' // 强制使用XHR适配器 }).catch(error => { if (error.code === 'ECONNABORTED') { console.log('请求超时'); } }); ``` #### 4. XHR适配器核心处理逻辑优化 参考XHR适配器源码中的关键处理点[^4]： ```javascript // 错误事件处理（关键代码） xhr.onerror = function handleError() { reject(createError('Network Error', config, null, xhr)); }; // 超时处理 xhr.ontimeout = function handleTimeout() { reject(createError( `timeout of ${config.timeout}ms exceeded`, config, 'ECONNABORTED', xhr )); }; // 状态码处理 xhr.onreadystatechange = function handleLoad() { if (!xhr || xhr.readyState !== 4) return; if (xhr.status === 0 && !(xhr.responseURL && xhr.responseURL.indexOf('file:') === 0)) { reject(createError('Network Error', config, null, xhr)); return; } }; ``` #### 5. 自定义适配器调试（参考引用[2]） ```javascript const customAdapter = (config) => { // 保留默认适配器逻辑 if (!shouldMock(config.url)) { delete config.adapter; // 关键！防止循环调用 return axios.defaults.adapter(config); } return new Promise((resolve) => { resolve({ data: mockData, status: 200, config }); }); }; // 创建实例 const instance = axios.create({ adapter: customAdapter }); ``` #### 6. 浏览器特性兼容处理 - 同步请求警告：避免使用`async: false` - 二进制数据处理：设置正确的`responseType` - 进度事件：检查`onUploadProgress`/`onDownloadProgress`回调 #### 7. 错误拦截统一处理 ```javascript // 全局错误拦截器 axios.interceptors.response.use( response => response, error => { if (error.message === 'Network Error') { // 添加网络诊断逻辑 return Promise.reject({ type: 'NETWORK_FAILURE', originalError: error }); } return Promise.reject(error); } ); ``` ### 典型解决方案对照表 | 错误场景 | 解决方案 | 相关引用 | |-----------------------|---------------------------------|--------| | 跨域请求被拦截 | 配置服务端CORS头 | | | 移动端网络不稳定 | 增加超时时间 + 自动重试机制 | [^4] | | 自定义适配器导致死循环 | 删除config.adapter后调用默认适配器 | [^2] | | 文件协议访问API | 检查xhr.status判断逻辑 | |
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值