vue cli3.0用axios调用本地json数据一直报404

最新推荐文章于 2023-07-27 22:00:00 发布
最新推荐文章于 2023-07-27 22:00:00 发布
阅读量595 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue@cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loverlanxin/article/details/103356420
版权
今天利用vue cli3模拟本地数据做项目时，发现axios调用本地数据报404错误

解决后记录一下：

1.vue cli@3.0版本脚手架对外暴露的静态文件入口是public文件夹(原来是static)，这里本地json文件也应该放在这里。

2.需要加上本地访问域名和端口一起访问才可以：

在这里插入图片描述
public如下：
在这里插入图片描述

这样就解决啦~

素雪玉
关注
专栏目录
在vue-cli3中使用axios获取本地json操作
10-15
本文将详细介绍如何使用axios库在vue-cli3项目中获取本地JSON文件，以便于在开发环境中模拟真实的数据请求。 Vue CLI 3是Vue.js官方提供的一个脚手架工具，它提供了一种快速构建Vue应用的模板方式。在Vue CLI 3中，...
vue3 axios 跨域请求 404 (Not Found)
lanwu628的专栏
12-16 3067
解决办法步骤： 1、要在根目录下创建vue.config.js文件，内容如下： module.exports = { devServer: { proxy: { ‘/api’: { target: ‘http://xxx/’, changeOrigin: true, pathRewrite: { ‘^/api’: ‘’ } } } } } 2、src/main.js设置如下： import Axios from ‘axios’ Axios.defaults.baseURL = ‘/api’ Vue.prot
【vue】vue-cli3中用axios访问本地json文件报错404
weixin_46682277的博客
04-13 1348
去访问时，却报错404了。文件保存到本地时，通过。
在vue3.0使用axios请求本地数据显示404的解决方法
zhengxinming2015的博客
05-14 3635
在vue3.0使用axios请求本地数据显示404 vue3.0以后，静态文件的路径存放改为public文件夹,包括json数据。下面贴出本人在vue3.0里用axios请求本地json数据显示404的踩坑过程。 注意画红色线的那个路径，虽然vue3.0以后把静态文件都放在了public,但请求本地数据的时候，一定记得把**…/public**去掉，要不然就会出现404错误。如下图所示： 然后如果你刷新页面，就会出现如下错误： 所以一定要记住，vue3.0请求本地json数据，记得把**…/public
解决vue-cli3使用axios显示404
前端菜鸡的博客
09-19 1749
今天第一次用调取后台的接口，接口是通的，但是一直显示404 后来发现是我调的接口没加/api 加上以后就行了
vue axios 设置proxyTable跨域后访问接口404
qq_44552416的博客
03-15 3764
描述 我是用的是本地IP启动我的项目 我想访问的接口是 http://192.168.100.217:2000/api/OrganizationManager/Get_Load 这是我proxy的配置代码 proxyTable: { '/api': { target: 'http://192.168.100.217:2000', changeOrigin: true, pathRewrite: {
vue-cli 使用axios的操作方法及整合axios的多种方法
10-18
这种方法使得所有的axios调用都可以通过一个全局的实例来进行。 3. **配置axios实例**： 在引入axios后，可以创建一个配置了基础URL、请求前和响应后的转换器的axios实例。这可以使得在请求时不必每次都指定完整的...
详解VUE调用本地json的使用方法
10-17
接下来，在Vue组件中引入Axios，并在`mounted`生命周期钩子中调用JSON数据： ```html <!-- 渲染表格等内容 --> import axios from 'axios' export default { data() { return { res: '', // 创建一个对象...
vue 使用axios 数据请求第三方插件的使用教程详解
10-16
下面详细介绍如何在Vue项目中使用axios进行数据请求，以及如何解决跨域问题和拦截器的使用。 首先，要使用axios，需要在项目中进行安装，可以使用npm命令进行安装： ``` npm install axios vue-axios --save ``` ...
Vue3解决：Mockjs 引入后并访问 404(Not Found) 的页面报错问题
最新发布
狮子座的男孩
07-27 4937
但在页面 报错为：GET http://localhost:5173/list 404 (Not Found)(即：在页面并没有找到自己引入 Mockjs 时，设置的地址和假数据)功能常用于解决数据模拟问题，有了 Mock 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率；前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工;根据上述的问题剖析和描述，发现：在引入。项目中，引入了 Mockjs。后，设置的数据和地址有问题；
【浅谈vue3代理】Vue3访问接口404，访问接口跨域怎么解决
赏樱看雪撸代码
05-13 5939
在用vue3调用接口请求404状态，vue3调用接口跨域，报错： Access to XMLHttpRequest at ‘xxx’ from origin 'xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the reques
vue3 axios代理配置报404
weixin_42773941的博客
01-08 5383
vue3 代理配置报404 需要调用的接口 http://192.168.1.21:8080/face/f/getGenGoodsClassAndGenGoodsBySize?pageSize=10&amp;pageNo=1 错误的代理配置 module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/online...
解决“Vue3调用本地服务接口失败，老是提示下载并安装本地服务”的办法
忧郁的蛋的专栏
04-27 376
上述代码的安装包下载链接是直接在界面中提供的，但有些情况不便在界面上直接提供。Vue3调用本地服务接口的时候，倘若失败，则再尝试调用2次，如果3次都失败了，就提示“下载本地服务exe安装包，并提供下载链接，请告诉我实现的代码”元素，并模拟链接的单击事件以实现安装包文件的下载。上述代码通过动态创建。
vue3使用axios获取数据报错404
呀？你来了啊！
07-09 695
vue3使用axios获取数据报错404 花了半天找错误，最后原因很尴尬，新建的vue.config.js文件放错文件夹了，需要放到与package.json同级目录下，而不是SRC下，记录一下，省的下次继续犯傻。
vue3 vite+axios 代理配置和axios封装（请求404bug解决）
weixin_47211345的博客
08-23 6221
对vite了解不多，代理借鉴即可
vue中使用axios访问本地json文件404
J1756465965的博客
03-08 1254
axios访问本地数据报错
vue 使用本地模拟json数据axios调用时报错404 ，最佳解决方案
在写作的路上持续输出。
03-27 2965
vue使用 axios 调用本地模拟数据 时报错404 ，最佳解决方案
VUE小项目问题之用axios插件取本地json文件，报404错误。
yan263364的博客
09-03 4751
一、问题 在用axios获取本地json数据时，总是报404错误。 百思不得其解。 二、经过 看网友们都是把本地json文件放在static文件中。 我写的项目存放在assets中，恍然大悟，应该是文件位置。 三、结果 文件改存为static axios({ method: method, url: url, data: method === 'P...
Vue2.0结合axios、mock实现登录功能实战
"这篇文章主要讲解如何使用Vue 2.0、axios、mock以及axios-mock-adapter来实现登录功能。作者在项目开发中发现并应用了mock和axios-mock-adapter，提供了具体的实现步骤和代码示例。" 在前端开发中，特别是与后端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值