vue ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-

于 2024-05-06 14:38:57 发布
阅读量564 收藏 1
点赞数 2
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdfdfgrd/article/details/138494289
版权
文章讲述了在使用Vue和axios进行API请求时遇到的错误，原因是前端将后端域名输入错误，导致前端无法连接，解决方法是检查接口一致性并处理跨域问题。
摘要由CSDN通过智能技术生成

  vue axios请求的时候报的这个错

排查出来是自己把后端的域名写错了,前端无法访问到后端接口导致的报错 

ps:出现这个bug一定要好好排查自己的接口是否和后端的一致或者是否需要解决跨域

小叶不耶
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
techQ&A · Vue项目axios请求时报错Network Error at createError at XMLHttpRequest.handleError
qq_41113339的博客
09-23 3万+
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-webpack-starter:Vue.js Webpack精益模板
04-18
Vue Webpack入门我想要一个Vue.js轻量级入门模板，其工具版本比官方Vue-cli中使用的工具要少，因此我从头开始创建了自己的工具。 该模板可供使用，可以开始使用Vue.js单个文件组件开发单页应用程序。 它使用Webpack...
vue前后端相连接报错：Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
m0_74132943的博客
10-15 1万+
其实这个错误不要害怕；因为这是你很可能是你的..........这个错误通常是由于前端无法访问到后端接口..................................
解决：Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
qq_53376718的博客
12-20 8514
Uncaught runtime errors:ERRORNetwork Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:160:14)
Vue项目报错：Uncaught (in promise) Error: Network Error
weixin_55320329的博客
08-02 1万+
原因： 没有打开接口文档 解决方法： 1.找到api文档 2.打开PowerShell窗口 输入node app.js即可解决问题
VUE Uncaught (in promise) Error: Network Error vue项目中net::ERR_CONNECTION_TIMED_OUT错误
lgq1368853532的博客
05-10 1687
setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题。修改axios\axios.interceptor.js, duration:300000,Message({message:"请求超时,请检查本地或服务器网络情况!修改src\main.js,500000)
postman可以通的请求，前端通不了（前端添加Content-type，后端收不到请求）
m0_69285071的博客
11-16 7339
就会会先发送一个option请求嗅探服务器是否具有应答的能力，然后才会发送真正的请求。通过这些设置，服务器告知浏览器允许来自任意源的跨域请求，并且允许接收特定的请求头和请求方法。也就是说后端需要设置一个"Access-Control-Allow-Headers"让浏览器发送真实的跨域请求（这里设置了headers的请求）；"Access-Control-Allow-Headers"响应头告诉浏览器服务器允许的额外请求头，以便浏览器可以继续发送实际的跨域请求。信息如下：（我自己写的一个打印请求信息的拦截器）
Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
最新发布
yh_is的博客
04-11 2187
原因:后端端口被占用导致后端未启动。2、再修改前端对应的后端端口。1、后端项目端口修改。
【Vue+Axios】Access to XMLHttpRequest at XXX from origin XXX has been blocked by CORS policy
HEX9CF的技术博客
09-25 5186
基于Vue3和SpringBoot进行前后端分离开发，实现登录功能。在测试提交表单时axios报错。
vue使用axios出现Network Error
m0_56199142的博客
07-09 1万+
解决方法： 把axios跨域请求地址的http改成https就行
next-missing-terser-webpack-plugin-dep:缺少terser-webpack-plugin的示例回购
04-08
然后运行yarn build % yarn buildyarn run v1.22.10$ next build> Build error occurredError: Cannot find module 'terser-webpack-plugin'Require stack:- my-app-yarn/node_modules/next-pwa/build-custom-...
preload-webpack-plugin：请改用https：github.comvuejspreload-webpack-plugin
02-18
preload-webpack-plugin 弃用：该项目的分支可以代替使用。 一个Webpack插件，用于使用<link rel='preload'>自动连接异步（和其他类型）JavaScript块。 这有助于延迟加载。 注意：这是的扩展插件，该插件可...
inject-inline-html-webpack-plugin:将内联脚本插入html-webpack-plugin生成的html文件中
04-19
此外，注入的脚本是根据webpack加载程序构建的，并且不是内联的。 仅支持Webpack 5。 安装 yarn add -D inject-inline-html-webpack-plugin 然后在HtmlWebpackPlugin之后实例化插件，并在html-webpack-plugin配置...
webpack-vue:使用webpack搭建vue项目
05-09
使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack，webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...
webpack-vue-config:这是与Nextcloud应用程序一起使用的基本Webpack配置
04-10
const webpackConfig = require ( '@nextcloud/webpack-vue-config' ) module . exports = webpackConfig // package.json ... " scripts " : { " build " : " NODE_ENV=production webpack --progress --config ...
Vue3与spring boot 的跨域问题
MonkeyRideDonkey的博客
07-22 2915
报错如下： Uncaught runtime errors:×ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:155:14) 解决：
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控制台也会全部展示
AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:158:14)
11-17
AxiosError: Network Error是由于浏览器的跨域安全策略导致的。浏览器限制了跨域请求，只有在服务端设置了响应头Access-Control-Allow-Origin时，才允许跨域请求。解决方案是修改前端配置，具体步骤如下： 1. 修改vue.config.js文件，添加proxy配置： ```javascript const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { '/api': { target: 'http://localhost:8088', changeOrigin: true, pathRewrite: { '/api': '' } } } } }) ``` 2. 在前端代码中使用axios时，将请求的url改为相对路径，例如： ```javascript axios.get('/api/data') .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 这样就可以解决AxiosError: Network Error的问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值