请求一直处于padding状态，一段时间后控制台报：Error: Network Error at e.exports (createError.js:16) at XMLHttpRequest.f.

最新推荐文章于 2025-01-15 19:56:52 发布
最新推荐文章于 2025-01-15 19:56:52 发布
阅读量3.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： node.js vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41930094/article/details/120757608
当尝试上传超过2MB的图片时，请求API会陷入padding状态并最终因网络错误失败。经过前端和后端的联合排查，发现是网关在检测到大尺寸图片时进行了拦截，中断了前端的请求。解决方案在于调整网关配置或者在前端压缩图片以满足上传限制。

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

  • 遇到问题：

场景：（上传小图片都可以成功）上传超过2M大小图片时（现在随便手机拍照的原图都2M多），请求API一直处于padding状态，约两分钟后，控制台报此错误！

控制台报错：Error: Network Error at e.exports (createError.js:16) at XMLHttpRequest.f.on

  • 解决问题：

前端：难道我使用的element中的上传组件，有默认设置图片上传大小？官方文档细看了，并未设置上传图片的默认大小，然后我想那我设置一下吧，发现自己的上传的校验图片大小的方法，没生效？

后端：请求没过来啊？后面我给报错演示给我们项目经理，然后他去排查网关问题，结合我这边的配合，最后排查出问题：网关检测到上传的图片大小超过2M就就行拦截了，导致前端请求中断，请求不到服务器！

  • 补充：

前端发送请求API访问服务器数据，偶尔控制台报错信息中有"XMLHttpRequest"信息，则代表请求失败，在后端的封装请求中，XMLHttpRequest和XMLHttpResponse分别代表请求的发起和响应！

Greg_Zhong
关注
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
最全面、最详细web前端面试题及答案总结
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
Uncaught (in promise) Error: Network Error at e.exports (axios.js:8:6410) at d.onerror (axio
Cap07博客
01-30 3677
node端设置响应头，解决跨域问题。
Getting Error: Network Error at e.exports (createError.js:16) at XMLHttpRequest.g.onerror (xhr...
suiusoar
01-15 299
获取错误：在 e.exports (createError.js:16) 和 XMLHttpRequest.g.onerror (xhr.js:117) 处发生网络错误，API 调用失败。
padding
weixin_38768831的博客
09-16 1726
在卷积核移动逐渐扫描整体图时候，因为步长的设置问题，可能导致剩下未扫描的空间不足以提供给卷积核的，大小扫描 比如有图大小为5*5,卷积核为2*2,步长为2,卷积核扫描了两次后，剩下一个元素，不够卷积核扫描了，这个时候就在后面补零，补完后满足卷积核的扫描，这种方式就是same。如果说把刚才不足以扫描的元素位置抛弃掉，就是valid方式。...
HTTP的padding状态
weixin_34001430的博客
06-26 2628
2019独角兽企业重金招聘Python工程师标准>>> ...
【CORS与跨域POST请求】：跨域POST请求的CORS解决方案
![解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’](https://img-blog.csdnimg.cn/ae8d6e527d434353a7574467265f6e88.png?x-oss-process=image/watermark,type_d3...
【FineReport报表交互增强】：5个JavaScript应用让报表栩栩如生
本文系统地介绍了FineReport报表工具的交互功能，并深入探讨了JavaScript基础以及其在报表交互中的高级应用。从基础语法到事件处理，再到动态效果的实现，文章详细阐述了JavaScript如何与HTML/CSS协同工作，以增强...
【JavaScript API离线文档终极指南】：20个专业技巧提升工作效率
![【JavaScript API离线文档终极指南】：20个专业技巧提升工作效率]...首先介绍了JavaScript API的基础知识，包括其定义、分类和在开发中的重要性，以及如何阅读和理解API文档的结构和内容。接着，文章探讨了创建高
Mac插件开发起航：构建你的Chromium扩展（七）
扩展程序通常由HTML、CSS和JavaScript组成，允许开发者利用浏览器的强大功能，例如标签管理、网络请求、数据存储以及与用户交互等。 Chromium扩展的创建和管理涉及到了解扩展的目录结构、生命周期、事件触发模
前端get/post等请求后，一直处于pending状态，解决办法
热门推荐
weixin_51345651的博客
04-25 4万+
前端发送完请求发现network里的请求一直处于pending状态（如图） 或者等待过一段事件后会报错，如图 然后我尝试了一些解决办法，分享给大家，建议大家按照顺序来 1.首先排查是不是后端的问题 这个最重要，不然搞半天就是浪费时间，那么如何排查不是自己的问题呢，当然是使用调试工具看看了，这里我首先推荐postman做调试 如果可以返回成功或者失败的回调那么就说明后端没问题，如果一直是加载的状态，那么就得联系后端了 2.后端没问题的话那么常常就是header问题了 这个时候需要
请求时参数正常，先padding，后500bug
qq_30351747的博客
03-08 600
描述 在created，或者mounted，或者什么事件，前端参数正确也传过去了，但是就是一直报错。开始是padding，然后直接500 效果 一直padding，最后500 报错提示 修复 调接口函数的时候加上定时器就好了 setTimeout(() => { this.getTemTree() }, 100) ...
Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError
qq_36632604的博客
07-07 8290
跨域访问问题 主controller加 @CrossOrigin注解
解决core3.0跨域请求问题：【Error: Network Error at createError (createError.js?2d83:16)】前后端分离Vue的使用
weixin_40359716的博客
11-06 1万+
问题描述 最近试着用vue+axios来搭建前端，实现前后端分离，后端采用asp.net coe mvc 架构，在前端axios调用后端接口时，出现了跨域请求的错误问题，经过一番查找，最终成功实现了跨域请求，迈出了前后端分离的第一步。跨域问题浏览器报错的日志如下： Error: Network Error at createError (createError.js?2d83:16) at XMLHttpRequest.handleError (xhr.js?b50d:84) 刚开始在后端加入了断点，前
数字后端概念——padding
qq_36480087的博客
02-14 5278
文章目录Adding Instance Padding(Optional) Report instance padding by using the following command:To delete instance padding, use the following command: Adding Instance Padding Instance padding is specified in terms of the number of sites occupied by each insta
vue跨界域名报错----Network Error at createError (webpack-internal:///./node_modules/axios/lib/c
jim_007的博客
12-19 2万+
Uncaught (in promise) Error: Network Error at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16) at XMLHttpRequest.handleError (webpack-internal:///./node_module...
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 ...
js路由跳转时放弃正在pending的请求
偏执
07-25 454
cancelToken : null , // 避免被加入cancel队列 });${cancelToken : null , // 避免被加入cancel队列 });cancelToken : null , // 避免被加入cancel队列 });${cancelToken : null , // 避免被加入cancel队列 });cancelToken : null , // 避免被加入cancel队列 });${
Js 下载大文件Error: Network Error
TomCat0916的博客
03-07 2086
Js 下载大文件 Error: Network Error
createError.js:16 Uncaught (in promise) Error: Request failed with status code 404 at e.exports (createError.js:16:15) at e.exports (settle.js:17:12) at h.onreadystatechange (xhr.js:59:7)
最新发布
03-30
<think>好的，我现在需要解决用户遇到的Axios请求返回404错误的问题。根据用户提供的引用内容，可能有几个原因导致这个问题。首先，我要回顾一下用户提供的引用信息，看看有哪些可能的原因和解决方案。 首先，用户提到了引用[1]、[2]、[3]、[4]中的内容，这些引用提到了404错误可能的原因，包括URL配置错误、后端问题、Nginx配置问题以及请求拦截器中的配置错误。我需要逐一分析这些可能的原因，并整理出解决步骤。 第一步，检查请求的URL是否正确。根据引用[3]中的建议，用户需要确认baseUrl是否正确配置。特别是在使用相对路径时，可能因为路径错误导致404。例如，如果前端配置的API地址是/api，而后端实际部署在另一个路径下，就会导致请求无法到达正确的端点。这时候需要检查Axios实例的baseURL设置是否正确，或者检查环境变量中的配置。 第二步，验证后端服务是否可用。引用[3]提到用户已经排查过后端是否有误，但可能还有其他因素，比如后端路由是否正确，或者服务是否正在运行。这时候可以通过工具如Postman直接发送请求到后端API，看看是否能正常响应。如果后端服务未启动或者路由错误，同样会导致404错误。 第三步，检查Nginx配置。引用[3]中用户通过修改Nginx配置文件解决了问题。可能的情况是Nginx的反向代理配置不正确，导致请求无法正确转发到后端服务。例如，Nginx的location块可能没有正确配置proxy_pass，或者路径重写规则有误。需要检查Nginx的conf文件，确保代理设置正确，并重启Nginx使配置生效。 第四步，跨域问题。虽然404错误通常与资源不存在有关，但有时候跨域问题也可能导致类似的问题。不过根据引用[4]，用户提到的是请求拦截器的问题，没有直接提到跨域。不过还是需要确认后端是否配置了CORS，允许前端的源、方法和头部。 第五步，请求拦截器的问题。引用[4]指出，如果在请求拦截器中没有返回config，会导致请求无法正确发送。例如，在Axios的拦截器中，如果修改了config但忘记返回它，后续的请求将无法获得正确的配置，从而可能导致路径错误或其他问题。需要检查拦截器代码，确保有return config。 另外，可能还有其他原因，比如网络问题、DNS解析错误，或者前端路由配置错误导致请求发送到了错误的地址。不过根据提供的引用，主要问题集中在上述几个方面。 接下来，我需要将这些分析整理成一个清晰的解决步骤，按照优先级排序，帮助用户一步步排查问题。同时，要确保语言简洁，结构清晰，用户能够逐步跟随操作。 最后，生成相关问题，帮助用户进一步理解可能相关的其他问题，比如处理其他状态码错误，或者优化Axios配置等。</think>### 解决Axios请求404错误的步骤 #### 1. **检查请求URL配置** - **确认`baseURL`或完整路径是否正确** 如果使用相对路径（如`/api/user`），需确保前端代理或服务器配置与实际后端路径匹配。例如： ```javascript // 示例：Axios实例配置 const instance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, // 检查环境变量是否正确定义 }); ``` 如果环境变量未定义或值错误，请求会发送到无效地址[^3]。 - **手动拼接URL测试** 在浏览器地址栏直接输入请求的完整URL（如`http://api.example.com/data`），观察是否能返回正确数据。若仍报404，说明后端服务未部署或路径错误。 #### 2. **验证后端服务状态** - **直接访问后端API** 使用Postman或curl跳过前端直接请求API，例如： ```bash curl http://localhost:3000/api/data ``` 若返回404，需检查后端路由、控制器代码及服务端口是否正常启动。 - **查看后端日志** 定位是否有请求到达后端，若未收到请求，可能是网络或代理问题。 #### 3. **检查Nginx反向代理配置** - **确认代理规则** 在`nginx.conf`中检查`location`块是否将请求正确转发到后端： ```nginx location /api/ { proxy_pass http://backend-server:3000/; # 结尾的/确保路径拼接正确 proxy_set_header Host $host; } ``` 修改后需重启Nginx： ```bash nginx -s reload ``` #### 4. **修复请求拦截器问题** - **确保拦截器返回`config`** 若在拦截器中修改了请求头或参数，必须返回`config`对象，否则请求无法发出： ```javascript axios.interceptors.request.use((config) => { if (localStorage.getItem('token')) { config.headers.Authorization = `Bearer ${token}`; } return config; // 必须返回修改后的config }); ``` 遗漏`return config`会导致请求中断，间接引发404[^4]。 #### 5. **排查跨域问题（CORS）** - **检查响应头** 即使返回404，若存在跨域问题，浏览器控制台会显示CORS错误。确保后端响应包含： ``` Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST ``` #### 6. **其他可能性** - **前端路由冲突** 若使用Vue Router等SPA框架，检查是否定义了与API路径相同的路由规则，导致请求被前端路由拦截。 - **文件路径引用错误** 静态资源（如图片）的404错误需检查资源路径是否相对于打包后的目录结构正确。 --- ### 总结流程图 ```mermaid graph TD A[Axios请求报404] --> B{检查URL配置} B -->|正确| C{直接访问API} B -->|错误| H[修正baseURL或路径] C -->|404| D{检查后端服务} C -->|200| I[检查Nginx或拦截器] D -->|服务未启动| E[重启后端服务] D -->|路由错误| F[修正后端路由] I --> J[检查Nginx代理配置] I --> K[拦截器是否返回config] J -->|配置错误| L[修改nginx.conf并重启] K -->|未返回| M[添加return config] ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值