axios请求本地数据404

最新推荐文章于 2025-06-10 19:28:12 发布
最新推荐文章于 2025-06-10 19:28:12 发布
阅读量7.8k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Shellin_F/article/details/79122605
博主花费一天时间解决axios对本地数据发起请求时出现404错误的问题。问题根源在于项目缺少static文件夹，导致无法正确访问资源。通过创建static文件夹并配置，成功解决了404错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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


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

具体 就是：

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

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

 


                

        

    

    
  



    



                



	

		

			

				
					
【精讲】vue框架 axios请求（内含模拟数据交互部分）入门

				
			

			

				

					m0_59505309的博客
				

				

					08-17
					
					891
					
				

			

		

		

			
				
【精讲】vue框架   axios请求（内含模拟数据交互部分）等详细内容入门

			
		

	



                

            
              



	

		

			

				
					
axios请求本地json文件，报404

				
			

			

				

					weixin_50255994的博客
				

				

					05-25
					
					1077
					
				

			

		

		

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



			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					dabingyouxiaozhihui的专栏
				

				

					08-10
					
					401
					
				

			

		

		

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

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

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




			
		

	





	

		

			

				
					
axios访问后台时，返回404

					
最新发布

				
			

			

				

					ElectronStorm的专栏
				

				

					06-10
					
					272
					
				

			

		

		

			
				
axios写了一个异步调用后台的方法，调用结果走了catch。后台打断点，发现调用成功了，且也正确返回了。但前台始终报：code: ERR_BAD_REQUEST ,message: Request failed with satus code 404。看来是不加这个，springboot就没有把返回值当成json的bean，有可能吧。后来在排查之后，发现后台controller上面没有加@ResponseBody。发现f12里显示的X-Proxy-Url地址是正确的。刚开始以为是跨域的地址没有正确转换。

			
		

	



		

			
		



	

		

			

				
					
axios请求显示404的问题

				
			

			

				

					qq_47795143的博客
				

				

					08-26
					
					1114
					
				

			

		

		

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

			
		

	





	

		

			

				
					
axios请求本地json报错404

				
			

			

				

					weixin_52703987的博客
				

				

					12-17
					
					4821
					
				

			

		

		

			
				
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
					
					6925
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					10-14
				

			

		

		

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

			
		

	





	

		

			

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

					
热门推荐

				
			

			

				

					时光隧道
				

				

					02-05
					
					2万+
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					VirgoYellow 的专栏
				

				

					07-10
					
					1307
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					自学前端开发
				

				

					04-23
					
					309
					
				

			

		

		

			
				
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'

			
		

	





	

		

			

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

				
			

			

				

					虎康的博客
				

				

					09-01
					
					1773
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_48203270的博客
				

				

					12-17
					
					6968
					
				

			

		

		

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

			
		

	





	

		

			

				
					
让axios读取本地模拟数据报错404： Error: Request failed with status code 404

				
			

			

				

					weixin_42349568的博客
				

				

					10-21
					
					2924
					
				

			

		

		

			
				
原因一：cli3.0已经把静态资源的文件夹改成public文件夹了，所以静态资源应该放置在public文件夹下。

但是！我这样写依旧是报错！


很难受，但是我没有哭。
原因二，访问静态文件的路径不需要public.
因为访问静态资源时，已经定位到public文件夹了！！！
于是去掉public
//获取后台数据
			async getHomeInfo(){
				const {data:res}=await this.$http.get('http://localhost:8080/index.j.

			
		

	





	

		

			

				
					
Could not load content for http://localhost:1111/js/axios.min.map: HTTP error: status code 404

				
			

			

				

					Hello World
				

				

					11-03
					
					7397
					
				

			

		

		

			
				
解决：




			
		

	





	

		

			

				
					
错误： “GET /static/jquery/jquery-3.3.1.js HTTP/1.1“ 404 1692

				
			

			

				

					qq_38197794的博客
				

				

					08-03
					
					4682
					
				

			

		

		

			
				
django搭建博客小站时，报错[03/Aug/2020 11:51:07] “GET /static/jquery/jquery-3.3.1.js HTTP/1.1” 404 1692，我的错误原因是我下载的jguery是jquery-1.10.2.min.js，而加入到base.html代码中的是 ，检查一下你的代码吧~



			
		

	





	

		

			

				
					
axios请求传参方式

				
			

			

				

					FantasyBreaker的博客
				

				

					03-16
					
					2016
					
				

			

		

		

			
				
1.request
//原始的Axios请求方式
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  timeout: 1000,
  ...//其他相关配置
});

2.get/delete
axios.get('demo/url', {
  params: {
     id: 123,
     name: 'Henry',

			
		

	





	

		

			

				
					
Vue进阶（二十）： 请求方式详解

				
			

			

				

					IT全栈 华强工作室
				

				

					12-20
					
					4004
					
				

			

		

		

			
				
1.resource请求
cnpm install vue-resource --save 
import VueResource from 'vue-resource'
Vue.use(VueResource)
this.$http.get("")

2.axios 请求
cnpm install axios --save 
axios.defaults.baseURL = "根地址"
//vu...

			
		

	





	

		

			

				
					
axios请求本地json

				
			

			

				

					08-25
				

			

		

		

			
				
使用axios请求本地json文件可以通过以下几种方法实现：

方法一：在vue中引入本地json文件，然后通过变量接收数据。首先，你需要在vue文件中引入json文件，可以使用相对路径或者别名来引入。然后，在data选项中定义一个变量，用于接收json数据。在mounted钩子函数中，将json数据赋值给该变量即可。例如：
```
// 通过json文件路径引入
import jsonData from './***.json'

data() {
  return {
    commonJson: {},
  }
},
mounted() {
  this.commonJson = jsonData
  console.log(this.commonJson)
},
```

方法二：使用axios发起get请求获取本地json文件的数据。首先，你需要安装axios并引入它。然后，通过调用axios的get方法来获取json文件的数据。在then回调函数中，你可以处理获取到的数据。例如：
```
import axios from 'axios'
Vue.prototype.$axios = axios

this.$axios.get('./test.json').then(res => {
  console.log(res)
})
```

方法三：在vue文件中使用require引入本地json文件。你可以使用require函数来引入json文件，然后将返回的数据赋值给一个变量。例如：
```
let data = require('路径')
```

需要注意的是，具体使用哪种方法取决于你的项目配置和个人偏好。同时，要确保json文件的路径和名称正确，并且路径的相对位置与vue文件相符。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* *3* [获取本地json文件](https://blog.youkuaiyun.com/m0_50125215/article/details/126905322)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
-  *2* [axios请求本地json](https://blog.youkuaiyun.com/weixin_44763569/article/details/90444975)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值