axios请求本地数据404

最新推荐文章于 2023-09-01 16:53:50 发布
原创 最新推荐文章于 2023-09-01 16:53:50 发布 · 7.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博主花费一天时间解决axios对本地数据发起请求时出现404错误的问题。问题根源在于项目缺少static文件夹，导致无法正确访问资源。通过创建static文件夹并配置，成功解决了404错误。

真的是 又整整一天，不明白为什么是404，各种找：


真的是各种方式的查找，终于我找到了，就在这一篇中：点击打开链接

具体 就是：

访问服务器文件，应该把json文件放在最外层的static文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹
那么，我为什么之前的就可以呢？

因为我的项目建的早（可能），当时没有，或者是我误删了（就像我那消失的config文件夹一样），总之就没有static这个文件夹，自然就没有这个问题了。

 


                

        

    


  



    



                



	

		

			

				
					
vue使用axios获取本地json文件数据及创建本地数据接口

				
			

			

				

					L20523的博客
				

				

					12-25
					
					5864
					
				

			

		

		

			
				
axios是前端必学的一个知识点，刚接触axios的同学可能会因为没有接口测试而犯难，本文教会你如何用axios获取本地json文件数据，以及创建本地数据接口。

			
		

	



                

            
              



	

		

			

				
					
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》052-使用vue-axios请求天气数据

					
热门推荐

				
			

			

				

					时光隧道
				

				

					02-05
					
					5万+
					
				

			

		

		

			
				
在现代 web 开发中，数据的动态获取与展示是提升用户体验的重要组成部分。尤其是在天气应用中，实时获取和展示天气数据，不仅能够满足用户的实用需求，还能为他们提供更好的使用体验。Vue.js 因其简洁的语法和高效的响应式特性，成为了许多前端开发者的首选框架。而结合 axios 这一流行的 HTTP 客户端，我们可以轻松地发送网络请求，获取外部 API 中的数据。本篇文章将为你详细介绍如何使用 vue-axios 发送请求，获取天气数据。

			
		

	



              


  
  
              

                


	

		

			

				
					
axios请求本地json文件，报404

				
			

			

				

					weixin_50255994的博客
				

				

					05-25
					
					1090
					
				

			

		

		

			
				
VUE中axios请求本地JSON文件，报404原址



			
		

	





	

		

			

				
					
vue学习之vue cli3搭建的项目里使用axios获取本地数据失败问题

				
			

			

				

					dabingyouxiaozhihui的专栏
				

				

					08-10
					
					416
					
				

			

		

		

			
				
基于vue cli3.10搭建的项目用axios调用本地json数据一直报404解决：

1.vue cli3.10 public文件夹才是静态资源文件

2.直接写 this.$axios.get('/img.json')即可




			
		

	



		

			
		



	

		

			

				
					
axios请求显示404的问题

				
			

			

				

					qq_47795143的博客
				

				

					08-26
					
					1207
					
				

			

		

		

			
				
AxiosError，request failed with status code 404，axios 404，axios请求404。附：axios封装。

			
		

	





	

		

			

				
					
axios请求本地json报错404

				
			

			

				

					weixin_52703987的博客
				

				

					12-17
					
					4855
					
				

			

		

		

			
				
1.方法一
使用vue cli老版本创建的vue项目
1.在vue项目根目录下的static目录下创建json文件。例如：data.json
2.在test.vue中获取本地json数据
 
  import axios from 'axios'
 
  export default {
    name: "index",
    data() {
      return {};
    },
    mounted() {
      this.getData()
    },
    methods

			
		

	





	

		

			

				
					
axios拦截404报错_正确使用Axios，提升接口请求幸福感

				
			

			

				

					weixin_29280657的博客
				

				

					02-03
					
					6989
					
				

			

		

		

			
				
1 前景介绍根据Axios中文文档：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。因其实在是过于简单粗暴，好用的一逼，可以算是目前最流行的前后端数据交互的工具，前端人员基本上每天都在接触它。为达到体感更佳的使用效果，一般不会直接原生使用（当然你硬要原生使用也可以），一般需要做几个简单的二次封装动作。本文旨在通过在vue项目中对axios的二次封装使...

			
		

	





	

		

			

				
					
vue axios请求成功却进入catch的原因分析

				
			

			

				

					10-14
				

			

		

		

			
				
 当axios请求返回成功的响应后，会执行then方法中的回调函数。如果then方法中的回调函数内部有抛出错误，即使HTTP请求本身是成功的，这些错误也会导致进入catch代码块。比如，在then方法中进行了数据处理，如果处理...

			
		

	





	

		

			

				
					
vue-cli2本地使用axios请求json数据教程

				
			

			

				

					自学前端开发
				

				

					04-23
					
					324
					
				

			

		

		

			
				
1.找到在build下的 webpack.dev.conf.js

2.在里面编辑需要配置一下内容
const express = require('express')
const app = express()
const appData = require('../db.json') // 加载本地json文件
const seller = appData.movies_list  // 获取对应本地数据
const apiRoutes = express.Router()
app.use('/api'

			
		

	





	

		

			

				
					
vue-cli 3 以上的项目使用 axios 请求本地 json 文件

				
			

			

				

					VirgoYellow 的专栏
				

				

					07-10
					
					1340
					
				

			

		

		

			
				
vue-cli 3 以上的项目使用 axios 请求本地 json 文件

			
		

	





	

		

			

				
					
axios vue 获取本地静态文件

				
			

			

				

					qq_43345846的博客
				

				

					05-24
					
					3203
					
				

			

		

		

			
				
这是空的



			
		

	





	

		

			

				
					
报错：axios 发送的接口请求 404

				
			

			

				

					虎康的博客
				

				

					09-01
					
					1815
					
				

			

		

		

			
				
axios 发送的接口请求 404，根本没有把接口信息发送到后端，这个时候你可以查看检查一下自己的接口名字，或让后端配合换一个接口名字再发送一次接口请求。

			
		

	





	

		

			

				
					
axios请求本地json文件

				
			

			

				

					懒羊羊懒羊羊
				

				

					07-21
					
					1961
					
				

			

		

		

			
				
【代码】axios请求本地json文件。

			
		

	





	

		

			

				
					
在Vue中axios的请求方法

				
			

			

				

					Delusion__123的博客
				

				

					11-11
					
					1964
					
				

			

		

		

			
				
在Vue中axios的请求方法

			
		

	





	

		

			

				
					
vue-cli@3.0使用Axios请求本地json文件报错404

				
			

			

				

					reffrselom的博客
				

				

					07-22
					
					3557
					
				

			

		

		

			
				
想要本地模拟json数据请求，@3.0版本脚手架较2.0版本改变较大，实现过程中发现还有很多坑需要踩一踩，
这里需要做一些说明：

vueCli@3.0版本脚手架对外暴露的静态文件入口是public文件夹(原来是static)，这里本地json文件也应该放在这里
网上有些资料说相对路径会报错，绝对路径可以，这里测试发现，加上本地访问域名和端口一起访问才可以

这里就很坑的感觉了，还没有找到其他的可...

			
		

	





	

		

			

				
					
vue发axios请求本地数据及vant组件使用

				
			

			

				

					qq_45911604的博客
				

				

					04-27
					
					914
					
				

			

		

		

			
				
vue发axios请求本地数据及vant组件使用

			
		

	





	

		

			

				
					
Vue中使用Axios请求后端接口的方法总结

				
			

			

				

					Allurewuhui的博客
				

				

					12-07
					
					4717
					
				

			

		

		

			
				
1.在入口文件引入axios并配置请求头根路径和请求头拦截


// 引入axios
import axios from 'axios'
// 设置请求根路径 
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
// 设置请求头拦截
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.

			
		

	





	

		

			

				
					
vue请求本地路径GET http://localhost:8080/.... 404 (Not Found)

				
			

			

				

					weixin_48203270的博客
				

				

					12-17
					
					7013
					
				

			

		

		

			
				
vue请求本地路径GET http://localhost:8080/.... 404 (Not Found)

			
		

	





	

		

			

				
					
使用axios读取本地json文件

				
			

			

				

					paradoxaaa_的博客
				

				

					04-20
					
					1806
					
				

			

		

		

			
				
1、本地json文件应存储在public文件夹下。2、在组件中使用axios.get读取。

			
		

	





	

		

			

				
					
axios请求本地excel文件内容

					
最新发布

				
			

			

				

					08-07
				

			

		

		

			
				
要使用 Axios 库请求并读取本地 Excel 文件的内容，通常需要结合文件读取库（如 `xlsx` 或 `sheetjs`）来解析 Excel 文件内容。Axios 本身用于发送 HTTP 请求，因此在读取本地文件时，通常用于从服务器获取文件流，而解析文件内容则依赖其他库。

### 1. 安装依赖

首先，确保项目中已安装 `axios` 和 `xlsx`（或 `sheetjs`）：

```bash
npm install axios xlsx
```

### 2. 读取本地 Excel 文件并解析内容

在客户端（如 Vue 或 React 项目中），可以通过 `<input type="file">` 获取用户选择的本地 Excel 文件，然后使用 `FileReader` 读取文件内容，并通过 `xlsx` 库进行解析。

```html
<input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
```

```javascript
import axios from 'axios';
import XLSX from 'xlsx';

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet);
        console.log(json); // 输出Excel文件内容
      };

      reader.readAsArrayBuffer(file);
    }
  }
}
```

### 3. 从服务器下载并解析 Excel 文件

如果 Excel 文件存储在服务器上，可以使用 Axios 请求文件流并解析：

```javascript
import axios from 'axios';
import XLSX from 'xlsx';

axios.get('/api/excel', { responseType: 'arraybuffer' })
  .then(response => {
    const data = new Uint8Array(response.data);
    const workbook = XLSX.read(data, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
    console.log(json); // 输出Excel文件内容
  })
  .catch(error => {
    console.error('请求或解析Excel文件失败:', error);
  });
```

### 4. 下载并保存 Excel 文件（可选）

如果需要将解析后的数据导出为 Excel 文件，可以使用以下代码生成并下载文件：

```javascript
function exportToExcel(data, filename) {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  XLSX.writeFile(workbook, `${filename}.xlsx`);
}
```

### 5. 注意事项

- **文件类型支持**：确保使用 `accept=".xlsx, .xls"` 来限制上传的文件类型。
- **响应类型设置**：在请求 Excel 文件流时，务必设置 `responseType: 'arraybuffer'`，以便正确解析二进制数据。
- **安全性**：处理用户上传的文件时，应验证文件类型和大小，防止恶意文件上传或资源耗尽问题。

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值