vue2/3 - 使用mock模拟数据，axios发送请求时报错Request failed with status code 404报错，请求数据报错404，vue mock.js 报错详细解决！

已于 2024-09-12 16:46:08 修改
阅读量2.2k 收藏 3
点赞数 7
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： vue2.js vue3.js nuxt.js mock.js axios mock模拟接口报错404解决 请求地址url没问题报错404
于 2024-07-10 23:38:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/140336861
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
354 篇文章 2460 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
133 篇文章 158 订阅 ¥9.90 ¥99.00
订阅专栏

报错截图

在vue2、vue3项目开发中，安装使用mock.js模拟数据插件，但在发送axios请求时出现错误：Request failed with status code 404，无法获取模拟数据并且接口404错误提示，关键是请求地址是正确的没有拼写错误，接口路径url完全没问题却还是报错。使用mock模拟接口, 前端通过axios发起请求返回404，在mock中无法直接获取到数据。

其他教程都无法解决，在本文你只要报类似的错误就可以100%完美解决。

在这里插入图片描述
在这里插入图片描述

解决教程

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Error Request failed with status code 404 at createError (createError、跨域问题、axios、404、500
Ajekseg的博客
03-03 1065
前后端分离，写axios时常见报错 常见问题-跨域（要配置一下vue.config.js）噢 跨域的解释、定义：当前所在页面的url去请求后台提供的url的时候，这两个url的相比较之下，如果协议类型、域名、端口号其中任何一个不一致就会发生跨域问题 1. 404 可能是后端的bug，还没部署好(接口未处理)之类的 可能是前端问题：路径错误（拼写错误！！！） 跨域问题-路径没写对 这是我main.js的配置（个人习惯不一样，可能不同噢） 这是vue里面的写法，需要注意记着写写’${}‘否则跨域
代理请求： Request failed with status code 404
segegefe的博客
02-23 1万+
HTTP状态码—请求错误 400 Bad Request 1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。 2、请求参数有误。 401 Unauthorized 当前请求需要用户验证。 402 Payment Required 该状态码是为了将来可能的需求而预留的。 403 Forbidden 服务器已经理解请求，但是拒绝执行它。 404 Not Found 请求失败，请求所希望得到的资源未被在服务器上发现 第一中可能：React中将你安装的proxy 或者是 cre
基于@Vue/cli 4.3 及 Mock.js 生成随机数据用于Ajax请求 —— 模拟美团官网
01-08
基于@Vue/cli 4.3 及 Mock.js 生成随机数据用于Ajax请求 —— 模拟美团官网美团网——web端搭建环境项目创建及目录结构模块开发部分代码介绍说明Vuex 状态管理总结 美团网——web端 搭建环境 @Vue/cli 4.3.1 ，包含 vue-router / vuex等的使用 —— 主体环境 (@vue/cli本就基于 webpack处理代码打包) @vue/cli-service-global 用于快速原型开发 babel 转换代码 axios 请求数据 / Mock.js 模拟数据 element-ui 引用部分组件 less 编写 css 样式 整体环境大致如上
AxiosError {message: ‘Request failed with status code 404‘, name: ‘AxiosError‘, code: ‘ERR_BAD_REQUE
最新发布
m0_62115261的博客
09-25 710
请求转发到指定的后端服务器，并在转发前修改请求的origin头部和路径，以匹配后端服务的期望。简单地说就是加上这段代码后，请求路径带/api都放行。原理：启用CORS支持，允许前端应用安全地请求后端服务的数据，然后配置一个HTTP代理，将前端应用中的。解决方法，在项目的vite.config.js加上这段代码就行了。最近做项目前端，搞完移动端，再做管理系统的时候出现这个跨域问题。
vue-cli3 ：mock模拟数据，用axios请求数据过程遇到的问题
weixin_30642869的博客
06-14 815
mock是用来模拟数据，对于前端开发而言这是真正的独立开发，之前都是自己手动模拟数据，页面多了就感觉很混乱而且效率不高，还不能真正去模拟请求后台数据。 之前请求后台是用ajax，最近学vue框架，所以采用axios.(希望一切友好....) 首先在项目里先安装mock，以及axios 安装好之后，接下来开始配置： 1.先看一眼我的目录，没有箭头的可以忽略 2.修改内容 2.1配置...
vue3+vite+axios+mock从接口获取模拟数据实战
学而思(xiejava的blog)
08-24 1614
在用Vue.js开发前端应用时通常要与后端服务进行交互，例如通过API接口获取数据，在后端服务接口还没有具备之前，可以通过mock(模拟)数据来进行开发。使用mock数据可以让前端开发人员独立于后端开发人员工作，加快开发速度。在没有真实数据的情况下，mock数据可以帮助开发者更快地看到UI的呈现效果和交互逻辑。 本文通过vue3+vite+axios+mock来介绍如何实现Vue.js的前端应用从接口获取模拟数据。
使用axios来mock数据以及使用node服务来代理本地接口
Dj_Fairy的博客
11-29 586
使用axios来mock数据 1、安装axios 2、创建数组json 3、配置devser vue-cli3在vue.config.js里面配置 vue-cli2以下的版本在webpack.dev.conf.js里面配置 配置代码如下： const webpack = require('webpack') const path = require('path') const ap...
Error: Request failed with status code 404 at createError (createError、跨域问题、axios、404、500
m0_46183615的博客
11-14 2万+
前后端分离，写axios时常见报错 常见问题-跨域（要配置一下vue.config.js）噢 跨域的解释、定义：当前所在页面的url去请求后台提供的url的时候，这两个url的相比较之下，如果协议类型、域名、端口号其中任何一个不一致就会发生跨域问题 1. 404 可能是后端的bug，还没部署好(接口未处理)之类的 可能是前端问题：路径错误（拼写错误！！！） 跨域问题-路径没写对 这是我main.js的配置（个人习惯不一样，可能不同噢） 这是vue里面的写法，需要注意记着写写’${}‘否则
Vue3解决：Mockjs 引入后并访问 404(Not Found) 的页面报错问题
狮子座的男孩
07-27 5253
但在页面 报错为：GET http://localhost:5173/list 404 (Not Found)(即：在页面并没有找到自己引入 Mockjs 时，设置的地址和假数据)功能常用于解决数据模拟问题，有了 Mock 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率；前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工;根据上述的问题剖析和描述，发现：在引入。项目中，引入了 Mockjs。后，设置的数据和地址有问题；
axios错误 Request failed with status code 404
weixin_48077500的博客
11-26 916
axios错误 Request failed with status code 404 这个bug困惑了卤煮一个小时,问了朋友,让我找路由的问题,我擦真的是忽悠 解决思路 URL 换小写 url 电子竞技 菜是原罪
vue-cli3使用mock数据的方法分析
11-21
4. 在 Vue 组件中使用 axios 或其他请求库发起请求，获取 mock 数据。 通过以上步骤，开发者可以在前后端开发的不同阶段有效地进行本地测试和调试，提高开发效率。了解和掌握这一方法对于 Vue.js 开发者来说是非常...
当你在Vue中使用Mockjs和axios的时候为什么会报404？
wh7pwb98的博客
12-09 3252
当你使用在Vue中使用Mockjs和axios的时候为什么会报404？ emmmm， 你可能需要看下main.js里面有没有把mock放进去， CTMD，烦躁 mock是你写的Mock文件
vue爬坑之mock使用拦截正常axios请求
Hiroshi's
01-30 2021
最近一个项目犯了一个特别二的问题，卡了一会才解决，当时在调试登录接口的时候，怎么都发不出去axios请求，chrome的network里面无论如何都没有axios发起的登录请求： // login.vue <template> <div class="login"> <div class="container"> <a href="/#/index">![](/imgs/login-logo.png)</a> &l
【bug】axios请求mock.js失败
lorogy的博客
10-09 1246
【vue】mock.js安装及使用 问题描述 post请求失败 请求没反应 get请求失败 返回页面HTML .vue this.$get('/gettest', {b:'222}, (res) => { console.log(res) }) this.$post('/posttest', {a:'111'}, (res) => { console.log(res) }) mock.js Mock.mock('/gettest', 'get', op
vue中axios请求mock中的数据
m0_46684624的博客
09-04 471
请求数据 1.在main.js引入mock //引入MOCK import Mock from 'network/mock' 2.创建一个mock.js //导入mockjs import Mock from 'mockjs' let data = { 'list|8-30':[ { name:'@cname()', address:'@city(true)', id:'increment(1)' } ] } //这里的地址自己随便起名字，确保
Vue中使用axios报错request failed with status code 404
AAA的博客
11-28 2613
原因： 可能是你在一分钟之内，频繁请求，github认为你在攻击他，今天IP地址就不能在请求了。 解决办法： 重启路由器，或者手机开个热点再去请求。
VUE中关于axios特别说明request failed with status code 404
热门推荐
菜鸟零号 kungfu~peng
10-09 9万+
VUE中关于axios特别说明request failed with status code 404 现场还原 这是在vue项目中，开始模拟数据用的是mock，进行假数据测试 在后台接口开发完毕之后，与真实数据做对接 当时在main.js是这样写的【除了长横线（-------------）的地方，其他地方暂时忽略】 import Vue from 'vue' import...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值