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
					
					1076
					
				

			

		

		

			
				
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
					
					269
					
				

			

		

		

			
				
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
					
					1109
					
				

			

		

		

			
				
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
					
					1771
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					reffrselom的博客
				

				

					07-22
					
					3545
					
				

			

		

		

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

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

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_48203270的博客
				

				

					12-17
					
					6962
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue中Axios的封装和API接口的管理

				
			

			

				

					全栈前端精选
				

				

					08-05
					
					492
					
				

			

		

		

			
				
点击上方“蓝字”带你每天阅读全栈前端精选好文如图，面对一团糟代码的你~~~真的想说，What F~U~C~K！！！回归正题，我们所要的说的axios的封装和api接口的统...

			
		

	





	

		

			

				
					
vue axios post 请求415、400、500、404报错时

				
			

			

				

					buchishutiao的博客
				

				

					02-01
					
					3459
					
				

			

		

		

			
				
后端参数使用了@RequestBody注解进行绑定，用了这个注解进行数据绑定，只能接受数据类型为 Content-Type类型为application/json。2.前台修改，设置Content-Type类型为application/json。写过两种传参方式：一种是直接将data中定义的数组传递。415错误的解释，服务器无法处理请求附带的媒体格式。1.后台修改，去掉@RequestBody注解。表示服务器错误，看看服务是否启动了。找不到页面，前端的端口号应该和后台端口号一致。

			
		

	





	

		

			

				
					
thymeleaf报错：Could not load content for xxx /css/bootstrap.min.css.map:HTTP error: status

				
			

			

				

					学亮编程手记
				

				

					09-30
					
					1076
					
				

			

		

		

			
				
问题：引入bootstrap.min.css的时候出现了    bootstrap.min.css.map 404的错误。
解决办法：删除bootstrap.min.css文件内容最后一行     /*# sourceMappingURL=bootstrap.min.css.map */    内容即可
同理还有删除jquery.contextMenu.min.js文件内容最后一行      //#sourceMappingURL=jquery.contextMenu.min.js.map   内容即可
同

			
		

	





	

		

			

				
					
Vue项目报错：DevTools failed to load source map: Could not load content for

				
			

			

				

					WEB前端李志杰
				

				

					04-21
					
					3225
					
				

			

		

		

			
				
添加 devtool配置，相关配置请自行搜索 webpack source map


// vue.config.js
module.exports = {
	configureWebpack: {
	  // devtool
	  devtool: 'cheap-module-eval-source-map'
	}
}


			
		

	





	

		

			

				
					
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、付费专栏及课程。

              

            

          

      

      余额充值