vue使用axios出现Network Error或者404

最新推荐文章于 2024-08-07 11:14:32 发布
最新推荐文章于 2024-08-07 11:14:32 发布
阅读量4.1w 收藏 15
点赞数 8
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/charlinheng/article/details/107156900
版权

在使用axios请求本地某个接口的时候,接口是有效的，但是控制台出现了报错:

Error: Request failed with status code 404

或者控制台Network Error报错,那么下面为可能解决的方式

原因

  1. 更换url中的地址
    在这里插入图片描述
    在这里插入图片描述
    需要将127.0.0.1换成http://localhost 本机域名识别。

  2. 在后台模块中相关ApplicationContext启动类中加入如下注解
    在这里插入图片描述
    加入@CrossOrigin注解，重新运行后台。

运行后，打印结果如下：
在这里插入图片描述

码农藏经阁
关注
专栏目录
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
axios-vue：Vue2上的Axios示例
02-14
轴距 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 Axios 请参阅
解决tomcat跨域问题
qq_45644484的博客
10-27 939
<filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <param-name>cors.allowed.origins</param-name> <param-value>*<
【案例37】NetWork Error
最新发布
Z.Virgil的博客
08-07 361
首先给/data/nginx/proxy_temp授权 chown -R root:root，reload后发现文件夹所属主、组变为非同一用户，排查Nginx的主进程为root用户，子进程为nginx用户，这就是为什么文件夹所属主、组变为不一致的原因。通过IP+端口的形式，绕过Nginx看是否系统会异常，如果正常则判断问题发生在Nginx上，但客户做了限制无法通过这个形式访系统。排查Nginx配置文件后发现，Nginx配置了相关client_max_body_size参数。1）、相关文件夹授权有问题。
Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK
热门推荐
blog-xiaoh的博客
08-24 5万+
Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK
vue前后端相连接报错：Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
m0_74132943的博客
10-15 1万+
其实这个错误不要害怕；因为这是你很可能是你的..........这个错误通常是由于前端无法访问到后端接口..................................
vue ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-
cdfdfgrd的博客
05-06 1032
vue ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-
NetworkError: 404
weilikk的博客
05-11 383
  1、spring框架下 返回json数据时漏写@ResponseBody标签   而引发的错误：   NetworkError: 404 /areafrontsystem/WE...editinfoDetailsList.jsp -     2、还有可能是新写的路径在配置文件里面没配置。。。所以才找不到路径           ...
解决AxiosError:Network Error跨域问题
LxyingINGing的博客
11-01 1万+
项目实现前后端分离时运行报错，解决AxiosError:Network Error跨域问题
axios请求接口报错 Uncaught (in promise) Error: Network Error
zhiqiuqiu2的博客
09-06 8849
就是post请求里的api地址有问题，这里我用的地址是tomcat的地址，但是前后端分离后，在vue项目中搭建了服务后，启动vue项目会自己生成一个url的访问地址。所以这里就不能使用8080了，要用生成的地址加上控制器的访问路径访问。在使用axios请求接口的时候，浏览器报错 Uncaught (in promise) Error: Network Error，找了很久也没有发现是什么问题？配置完服务后启动项目的地址，只要改成这个地址就可以了，或者不要前缀，直接使用控制器的地址也可以。
vue中axios的二次封装实例讲解
10-16
然而，随着项目的复杂度增加，直接使用axios可能会导致代码混乱且不易维护。因此，进行axios的二次封装是非常必要的，它可以帮助我们规范请求的格式，统一错误处理，并减少重复代码。下面将详细介绍在Vue中如何对...
解决vue axios的封装 请求状态的错误提示问题
12-08
如下所示： /** * axios配置,输出为vue组建 * */ import axios from 'axios'; import qs from 'qs' import CookiesJS from 'js-cookie' import router from '../router' // http request 拦截器 axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' }; // 在post请求发送出去之
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢？ 这是因为CORS跨域分为 简单...
详解Vue中使用Axios拦截器
12-09
本文将详细讲解如何在Vue中配置和使用Axios拦截器，以满足拦截前端网络请求和响应的需求。 首先，我们需要在项目中引入Axios。在本文的例子中，开发者使用vue-cli3创建项目，并创建了一个`config`目录，其中包含`...
vue使用axios出现Network Error
m0_56199142的博客
07-09 1万+
解决方法： 把axios跨域请求地址的http改成https就行
Axios 兼容问题 NetWork Error
baidu_34478852的博客
10-30 1万+
Axios 移动端真机低版本 请求 NetWork Error 如果默认配置了Headers application/json get请求是可以的 post请求需要使用 application/x-www-form-urlencoded Axios兼容问题 低版本不支持promise 安装es6-promise兼容低版本
Vue项目报错：Uncaught (in promise) Error: Network Error
weixin_55320329的博客
08-02 1万+
原因： 没有打开接口文档 解决方法： 1.找到api文档 2.打开PowerShell窗口 输入node app.js即可解决问题
vue在develop环境请求接口报错network error axioserror
09-04
在Vue的develop环境中，当我们使用axios库发送请求时，如果接口出现问题或者请求失败，可能会出现"network error"的错误提示，这是axios库自身的错误信息，表示网络错误。 造成该错误的原因可能有以下几种： 1. 接口地址错误：请检查所请求的接口地址是否正确，包括域名、路径、请求方法等参数是否准确。 2. 接口跨域问题：默认情况下，浏览器是不允许跨域请求的，如果你的接口地址和你的前端页面不在同一个域名下，那么就会发生跨域问题。解决办法可以通过配置后端服务器允许跨域请求，或者使用代理进行跨域请求。 3. 接口服务器问题：可能是接口服务器宕机或者出现其他故障导致无法访问。你可以通过访问接口地址的方式来验证是否可以正常访问。 4. 网络连接问题：可能是你的网络不稳定或者断开了连接，导致无法请求接口。你可以尝试刷新页面或者重新连接网络来解决该问题。 5. 其他问题：如果以上的方法都没有解决问题，那么可能是其他未知的错误导致的。你可以查看浏览器的开发者工具，查看具体的错误信息，或者参考axios官方文档或者社区中的解决方案来进行排查和解决。 总之，在develop环境中，当请求接口报错网络错误时，我们需要逐步排查错误的原因，并采取相应的解决办法来解决该问题。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值