vue-cli中的axios本地get请求json出现404

最新推荐文章于 2023-10-12 19:17:15 发布
最新推荐文章于 2023-10-12 19:17:15 发布
阅读量2.1k 收藏
点赞数
分类专栏： web前端 vue 文章标签： 问题 ajax axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40976560/article/details/91128709
版权

axios中本地get请求json出现404的原因：
我们静态资源只能放在static文件夹中，axios使用get请求， 需要把json文件放在static文件下
在这里插入图片描述

fuguoda
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue-cli3中使用axios获取本地json操作
11-19
在vue-cli3中，公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取，不能用post，不然会报404 axios.get(`./china-main-city/100000.json`) .then((data) => { console...
vue 项目GET http://localhost:8080/ 404 (Not Found)
热门推荐
南北极之间
07-29 2万+
解决办法：这里只有一个斜杠。没有一点。 出错原因：我昨天打包的时候要操作这个文件。把dev里的地址也加了一个点。其实只需要在打包的地方加一个点就好了 资料： https://blog.csdn.net/xiaoxia188/article/details/83746465 ...
vue3 404解决方法
最新发布
A12536365214的博客
10-12 3046
7. **服务器配置**：如果你的 Vue 3 应用部署在服务器上并使用了 Vue Router 的 `history` 模式，确保服务器配置正确，以确保可以正确处理路由。3. **404 组件**：创建一个专门用于处理 404 错误的组件（例如 `NotFoundComponent`），并在通配符路由中使用它。4. **检查路由导航守卫**：确保你的路由导航守卫没有阻止正确的导航。6. **查看浏览器控制台**：检查浏览器的开发者工具控制台，查看是否有其他错误或警告消息，这可能提供关于问题的更多信息。
VUE中get请求报错404解决 详细
不加防腐剂的博客
01-26 3885
报错404 别犹豫就是地址写错了 1.检查地址 2.检查vue跨域多数据源配置！！！！ 注意！跨域数据源的配置 两个api的名字,不能是包含关系，不能是包含关系！不然会404,比如 一个 “/api” 另外一个"apia" 这样会报错404！！！ ...
vue 项目 get 请求报错404
weixin_59519449的博客
03-20 3719
个人思路： 当看到404 报错的时候， 就看一下请求路径，看看是否哪地方写错了，然后再看看错误的原因究竟出现到哪里了 按照上面的思路： 果不其然，确实，在某些地方写错了，忘记了在main.js 中引入 mock 中的index.js 的文件 模拟请求接口及返回数据，所以请求不到数据，就会报错 404 ...
vue-cli+axios请求本地的json文件的方法-404解决办法
白白的博客
02-26 363
最重要的是json文件的位置要放在public中。 请求方法this.$http.get(‘js/districts.json’) getData(){ this.$http.get('js/districts.json') .then(function(res){ console.log(res) }) }, ，我之前一直放在static文件夹中，总是报404的错。 查了之后https://www.cnblogs.com/sllz
vue-cli 中用axios请求本地（非static文件夹内json数据）json报 404
zuo-yiran的博客
04-26 2168
vue项目本地调试调用本地的json文件，但是用axios请求报404的错，放在static文件夹内就可以访问到，如何在自定义文件夹（随意位置）内访问本地的json文件，经过查询及比对发现需要修改build–webpack.dev.conf.js文件，用vue-cli新建项目，修改webpack.dev.conf.js文件如下： 'use strict' const utils = require...
vue-cli 中用axios请求本地json报 404
NB_666的博客
04-15 5491
需要把json文件放在static文件夹下面 这是vue-cli内置服务器对外暴露静态资源的位置记录一下
vue项目用axios发送get请求json失败报错404的原因
weixin_49082331的博客
07-09 2018
把json文件直接丢到public目录下即可
vue axios读取json 404解决方案（vue-cli3.0）
anlideer的博客
03-27 242
记录一下，网上大部分解决方案是放static文件夹，但是vue-cli3.0的静态文件是在public文件夹里，所以已经不行了。 正解是在public文件夹里放文件，然后就可以正常用this.$axios.get('/filename.json').then(res=>{});来访问了（当然得先下好axios模块，写法也看自己定义成啥样）。 ...
vue +axios 项目本地引入json 出现404
weixin_38069018的博客
02-25 779
vue + axios 引入本地json 出现404 检查以及解决方案： 1 检查静态资源是否放在static文件夹下 或public文件夹下 注意：在vue-cli项目中，我们静态资源只能放在static文件夹中，axios使用get请求 vue-cli 创建的文件目录，如果是只有 public 而没有 static 文件夹，则直接将 json 文件放入 public 文件夹中，并且请求的时候不要带上 public ，直接 ‘./xxx.json’ 即可 ...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
08-27
本文通过实例代码给大家详细介绍了vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper的相关知识,需要的朋友可以参考下
vue-cli 使用axios的操作方法及整合axios的多种方法
01-19
1.创建vue脚手架 vue init webpack demo 2.cd 项目根目录，再安装axios ... axiosGet(){ let that = this; that.$http.post('http://xxx.168.xx.220:5678/api/user/login',{ UserAccount: string, UserPassword:
vue完成图片的单击切换--click事件
fuguoda的博客
06-01 1万+
思路：根据图片的下标切换图片路径，使用v-for循环出小图片地址，大图片地址根据小图片的地址 切换 代码如下： <div class="phoneP-box-left floatL"> <div class="left-bImg"> <img :src="'../../static/phone-img/phone'+itemIndex+'.p...
设置div的内容及子标签向右对齐
fuguoda的博客
05-24 1万+
主要是设置 ： text-align: right; display: inline-block; HTML: <div class="sureSubmit"> <a href="javaceript:;" class="aDecoration">提交订单</a> </div> CSS： .submitOrder .sureSubmi...
在vuex中axios带多个参数发送post请求到php
fuguoda的博客
06-08 5292
首先在vue界面把axios对象传到vuex中： data是一组新数据，this.cartdata是购物车已经存在的数据，this.$ajax是axios对象 新数据格式： 使用commit转发到vuex中 在store.js中引入qs，一般都是安装axios自己就有 import Vue from 'vue' import Vuex from 'vuex' import qs from 'q...
vue--点击添加class 其他标签删除class
fuguoda的博客
06-02 4482
1、css代码 .active{ border: solid 1.3px #C82333; background-color:#fff ; } 2、html代码 <ul> <li class="floatL" :class="{ active: n==isActive}" v-for="n in 5" v-if="item.combo!==undefined" @...
vue根据路由ID获取数据，设置html数据
fuguoda的博客
06-01 4401
1、在右路中跳转设置参数 <router-link :to="{path: 'PhoneParticular', query: { id: phone.id }}"> <img :src="phone.image[0].image1"/> </router-link>` 2、引入全部数据，在被跳转到的vue页面，获取路由地址id。 impor...
使用vue-axios带参数发送get请求到php获取数据库数据
fuguoda的博客
06-07 2853
1、vue发送axios请求 2、php接收请求并获取数据库 <?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); if(isset($_GET["id"])){ $id=$_GET["id"]; $sql="SELECT...
vuecli项目封装使用axios请求并使用
05-28
好的，关于这个问题，我可以给你一些简单的解释和示例代码。 Axios 是一个基于 Promise 的 HTTP 请求库，可以在浏览器和 Node.js 中使用。它提供了一种简单、易于使用的方式来发送 HTTP 请求，并且支持拦截器、请求和响应转换等高级功能。 在 Vue 项目中使用 Axios，一般可以先在项目中安装 Axios： ``` npm install axios --save ``` 然后在需要使用 Axios 的组件中，可以这样引入和使用： ```javascript import axios from 'axios' // 发送 GET 请求 axios.get('/api/user').then(response => { console.log(response.data) }).catch(error => { console.log(error) }) // 发送 POST 请求 axios.post('/api/user', { name: 'John' }).then(response => { console.log(response.data) }).catch(error => { console.log(error) }) ``` 其中，`/api/user` 是你要请求的 API 地址，`get` 和 `post` 分别表示发送 GET 和 POST 请求。在请求成功和失败的回调中，分别可以获取到响应数据和错误信息。 另外，为了方便管理和统一处理请求，可以在项目中创建一个 Axios 实例，并对其进行封装。例如： ```javascript import axios from 'axios' const api = axios.create({ baseURL: '/api', timeout: 5000, headers: { 'Content-Type': 'application/json' } }) // 请求拦截器 api.interceptors.request.use(config => { // 在请求发送之前，可以对请求做一些处理，例如添加请求头、验证用户信息等 return config }, error => { // 如果请求错误，可以在这里进行统一处理，例如提示用户、重试请求等 return Promise.reject(error) }) // 响应拦截器 api.interceptors.response.use(response => { // 在获取响应数据之前，可以对响应做一些处理，例如解密数据、转换格式等 return response }, error => { // 如果响应错误，可以在这里进行统一处理，例如提示用户、重试请求等 return Promise.reject(error) }) export default api ``` 在这个示例中，我们创建了一个名为 `api` 的 Axios 实例，并在其中添加了请求拦截器和响应拦截器。这样，在每次发送请求和获取响应时，都会先经过这些拦截器，可以在其中进行一些共通的处理。 接下来，在组件中使用这个经过封装的 Axios 实例，可以像这样： ```javascript import api from '@/api' // 发送 GET 请求 api.get('/user').then(response => { console.log(response.data) }).catch(error => { console.log(error) }) // 发送 POST 请求 api.post('/user', { name: 'John' }).then(response => { console.log(response.data) }).catch(error => { console.log(error) }) ``` 这样，我们就可以在 Vue 项目中方便地使用 Axios 进行 HTTP 请求了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值