解决 Vue+SpringBoot中axios发送post请求 控制台报错 404，后端能接收到数据！

最新推荐文章于 2025-03-10 17:28:34 发布
最新推荐文章于 2025-03-10 17:28:34 发布
阅读量3.8k 收藏 5
点赞数 9
分类专栏： SpringBoot 前端Vue 文章标签： axios post 404
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/q297896911/article/details/90375427
版权

emmmmmmmm，昨天写毕设 ，不小心踩了这个坑~

由于是后端新建的一个controller，导致前端报404错误，但是后端接收数据成功，还能读取数据库，让我很郁闷！

因为前面写的代码都没问题，后来逐一排查，发现，是Controller注解的问题。

我以前的Controller用的都是：@RestController，

但是新建的Controller用的注解是：@Controller

关于这俩具体的区别我自己的理解就是：

 @Controller只是标注当前类为控制器类，可以接收请求，但是对应的方法上需要标注@ResponseBody，这样才会返回json数据给前端。

 @RestController注解：就省去了每个类上都标注@ResponseBody这一步骤了，会自动给你加上@ResponseBody这个注解，就这么简单。

看下你的controller注解是不是写错了，如果想用@Controller注解，记得在Controller的方法上加上@ResponseBody就OK了！

 

 

 

springBoot+vue+axois POST方法时参数有问题总是报404
zwy15841139493的博客
09-12 914
问题出在 url: '/login', method: 'POST', params: user axois就会把对象像个方法一样加在路径后面，后台没法正确获取 正确方法为post时 request({ url: '/login', method: 'POST', data: user }).then(r...
Vue中使用axios（POST请求）调用后端接口时，后端接口接收不到前端参数的问题
L_WalkingPig的博客
02-25 8709
最近在学习Vue，期间遇到个问题就是前端页面使用axios调用接口将页面数据存储到数据库中时，使用POST请求时后端Debug不出前端的参数，导致前端触发调用后端接口时后端会一直报错，之前前端这样写的： （接口调用方法单独提出来写在marketmanager的insertMarketManagerFill方法中，这边import引入后直接用就行了） 但是问题来了，data中的各参数前端或者...
解决 Vue+SpringBoot中axios发送post请求 控制台报错 404，后端能接收到数据（@Controller和@RestController的区别）
weixin_42261198的博客
09-02 942
解决 Vue+SpringBoot中axios发送post请求 控制台报错 404，后端能接收到数据！ Controller使用：@RestController，就可以解决 新建的Controller用的注解是：@Controller 关于这俩具体的区别我自己的理解就是： @Controller只是标注当前类为控制器类，可以接收请求，但是对应的方法上需要标注@ResponseBody，这样才会返回json数据给前端。 @RestController注解：就省去了每个类上都标注@ResponseBody这一
Spring Boot中的404错误：原因、影响及处理策略
最新发布
m0_54850786的博客
03-10 1119
设置自定义的404页面，向用户提供友好的提示信息，同时提供相关链接以帮助用户找到需要的内容。这不仅可以提升用户体验，还可以增强搜索引擎对网站的友好性。
Vue 使用 axios post请求后台数据时 404
weixin_34179968的博客
04-26 1万+
今天遇到Vue 使用 axios post请求后台数据时 404 使用postman 就能获取到 网上找了大半天 终于找到了解决方法，传送门：https://www.jianshu.com/p/b10454ed38ba 转载于:https://www.cnblogs.com/badake/p/10777113.html...
axios post 404 但是 postman 正常
狗狗狗亮的博客
11-21 4110
今天遇到这个问题，在获取token的时候。 axios post 404， 但是 postman 正常获取到返回的数据，发现请求的返回404。 路径都是正确的，参数也是正确的。后来发现是没有设置请求头。 这边需要post formdata格式，添加了之后就OK了。 要注意的一点是，我这边在获取token的时候，我把请求头里还加了个 'Authorization': 'Bearer ' + tok...
axios发送post报错404问题
小白的博客
05-19 1万+
axios发送post报错404问题 第一次写前端，用axios发送http请求，发现报错，状态码为404找不到页面，前端代码如下 methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //向路由http://localhost:8080/login发送post请求 this.$axios.post('
教你如何制作vue+springboot项目
m0_67392409的博客
07-30 763
以上，完整的vue+springboot教程就完成了，如需要参考，可以查看本人制作的基于vue+springboot的学生成绩管理系统作为参考学生成绩管理系统先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。httpshttpshttpshttps。...
vue3+ts封装axios以及解决跨域问题
niulinbiao的博客
08-20 1133
前端请求后端数据时，会用到axios，但是如果不将axios封装好，会导致代码冗余求头能统一处理便于接口的统一管理解决回调地狱配置拦截器，给不同的实例配置不同的拦截器，支持以对象形式接受多个拦截器配置因此，在这里记录一下axios的封装过程。
Vue +Springboot + MySQL制作搜索引擎（三）后端用 spring boot 连接数据库和前端接口设计
Calypso6的博客
03-08 1953
Vue +Springboot + MySQL制作搜索引擎（三）后端用 spring boot 连接数据库和前端接口设计 后端我用 IntelliJ IDEA 软件。 创建项目 file-project-new project next next 选择web-spring web，next 后面就是选择文件存储位置，这个按照个人喜好即可。最后finish 项目设计 说明： SearchController用来写与前端通信的接口，里面return的内容就是送给前端的内容。 SearchD
Vue3+Vite+Axios Request 请求封装（TS版本）最新
一名全栈小白的博客
03-30 1410
Vue3+Vite+Axios Request 请求封装（TS版本）
axios发送post请求404问题
weixin_45139034的博客
04-03 1767
记录一下这个问题8 发送的时候请求头一定要带X-Requested-With，来判断他是ajax异步 //axios自带xsrf验证，妙哉
axios请求本地json报错404
weixin_52703987的博客
12-17 4808
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
vue axios post 404 问题解决方法
热门推荐
Luckyzhoufangbing的博客
04-11 2万+
1. 在main.js 入口文件配置172.20.10.7是我要掉的接口电脑的ip地址 import axios from 'axios' axios.defaults.baseURL='http://172.20.10.7:8080'; //设置一个类似base_url的请求路径 global.axios=axios; //设置一个全局axios便于调用 2. 然后axios请求 ...
vue项目打包部署到springboot后二级页面刷和访问新变成404问题
weixin_43190355的博客
10-16 1389
vue-cli3项目打包后部署到springboot，发现二级页面间无法跳转，同时直接输入二级页面的地址也无法访问子页面（报404），搜索很多后说是引用资源路径的问题。但是自己仍然没有解决。 https://blog.youkuaiyun.com/qq_41618510/article/details/99679916看到这篇文章后想起自己将路由模式设置为history，便恢复相关配置，取消history，并...
axios发起post请求时因为参数不一样返回404
weixin_58087364的博客
10-18 1904
最近开发一个后台项目，浏览器发起接口请求时发现报404错误，看下面截图 404一般是接口不存导致的，然后在跟服务端同事调试时发现一个奇怪的问题，我把请求的参数删除了几个只会请求竟然通过了，服务端代码没有任何改动，这什么鬼…404错误怎么会跟我参数有关系呢？ 请求是通过axios发起的 ...
Axios使用post发送请求，后端接收不到的问题 404
shiyutim
10-10 4691
在项目进行前后端交互的时候，使用Axios的post发送数据，在对接的过程中，配置跨域之后，发送显示404 报错。后台也接收不到数据。 在跟后端交流后，发现他这个接口不能接收json，而使用post发送的数据在http请求里面通过对象的形式发送的 点开后，能看到是通过Request Payload进行传送的。所以需要进行转换一下，然后在发送数据。 方法是，使用node提供的模块，进行数据转换...
vue-element-admin发起post请求404
aitanxiaofeng的博客
08-01 1505
由于vue-element-admin是一个纯前端个人项目，所有的数据都是用mockjs模拟生成。它的原理是拦截了所有的请求并代理到本地，然后进行数据模拟，所以你会发现network中没有发出任何的请求。vue.config.js配置文件中的devServer代理配置注释掉beforerequire(‘./mock/mock-server.js’),不然所有请求都会被此拦截,可能会导致莫名的请求404。某些post请求会被拦截导致莫名的404。...
springboot+vue全栈整合后 在新的tomcat上运行出现tomcat报错404的解决办法
KorleYao的博客
09-11 537
项目场景： 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原
vue3+vite+axios，请求本地部署的后端接口，接口地址是http://127.0.0.1:5000
03-10
<think>好的，我现在要帮用户解决在Vue3+Vite项目中使用Axios请求本地后端接口的问题，接口地址是http://127.0.0.1:5000。首先，我得理清楚整个流程，确保每一步都正确，并且考虑到可能的跨域问题。 首先，用户需要创建Vue3项目，使用Vite。这部分我应该确认他们是否已经安装了Node.js和npm/yarn，然后通过命令行创建项目。可能还需要说明如何选择Vue模板。 接下来是安装Axios。用户需要在项目中添加Axios依赖，使用npm或者yarn安装。这一步应该没问题，但可能需要提醒用户保存到依赖中。 然后是配置Axios实例。这里需要创建一个实例，设置baseURL为后端地址，这样后续的请求可以简写。同时，可能需要处理请求和响应拦截器，比如添加token或者处理错误。不过用户的问题可能暂时不需要这些，但提一下扩展性会更好。 跨域问题是一个关键点。本地前端运行在比如localhost:3000，而后端在5000端口，浏览器会阻止跨域请求。这时候需要在Vite的配置里设置代理。需要指导用户修改vite.config.js，添加server.proxy配置，将/api代理到后端地址。同时，需要让用户知道，在代码中请求/api/xxx会被代理到http://127.0.0.1:5000/xxx，这样避免跨域。 接下来是示例代码，展示如何在组件中使用Axios发送GET和POST请求。需要提醒用户处理异步操作，比如使用async/await，还有错误处理，用try...catch包裹。 测试部分需要确保后端服务已经运行，并且前端正确发起了请求。可能还要提到查看浏览器开发者工具中的网络请求，确认代理是否生效，响应是否正确。 最后，常见问题部分，跨域问题已经通过代理解决，但需要确认代理配置正确，后端是否允许CORS（虽然代理绕过了，但万一配置错误的话）。另外，检查接口地址是否正确，后端是否运行，以及网络问题比如端口是否被占用或者防火墙设置。 整个过程中，我需要确保步骤清晰，用户能一步步跟着操作，同时解释清楚每个步骤的原因，比如为什么需要代理，如何避免跨域。还要注意代码的正确性，比如使用composition API的setup语法，正确导入axios实例，以及处理响应数据。可能还需要提醒用户关于环境变量的使用，如果将来部署到不同环境，可以配置不同的baseURL，但这里暂时不需要，保持简单。 最后检查是否有遗漏，比如是否提到POST请求需要设置Content-Type，或者是否需要安装其他依赖。可能还要确认Vite的代理配置在最新版本中是否有变化，但一般来说配置方式稳定。确保所有代码片段正确，语法正确，特别是LaTeX部分，不过这个问题里可能用不上数学公式，所以可以忽略系统级指令中的LaTeX要求，但其他格式要符合，比如代码块用反引号。</think>以下是在 Vue3 + Vite 项目中使用 Axios 请求本地后端接口的完整实现步骤： ### 一、创建 Vue3 项目 ```bash npm create vue@latest # 选择需要的配置（TypeScript/JSX等可按需选择） cd your-project npm install ``` ### 二、安装 Axios ```bash npm install axios ``` ### 三、配置 Axios 实例 在 `src` 目录下新建 `utils/request.js`： ```javascript import axios from 'axios' const service = axios.create({ baseURL: 'http://127.0.0.1:5000', // 基础地址 timeout: 5000 // 超时时间 }) // 请求拦截器（可添加 token） service.interceptors.request.use(config => { return config }) // 响应拦截器（可处理错误） service.interceptors.response.use(response => { return response.data }, error => { return Promise.reject(error) }) export default service ``` ### 四、解决跨域问题 修改 `vite.config.js`： ```javascript import { defineConfig } from 'vite' export default defineConfig({ server: { proxy: { '/api': { target: 'http://127.0.0.1:5000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }) ``` ### 五、使用示例 在组件中发送请求（以 `<script setup>` 语法为例）： ```javascript import { ref } from 'vue' import request from '@/utils/request' const data = ref(null) // GET 请求示例 const fetchData = async () => { try { const res = await request.get('/api/data') data.value = res } catch (error) { console.error('请求失败:', error) } } // POST 请求示例 const postData = async () => { try { await request.post('/api/submit', { name: 'Vue3', value: 2023 }) } catch (error) { console.error('提交失败:', error) } } ``` ### 六、启动测试 1. 确保后端服务已在 5000 端口运行 2. 启动前端项目： ```bash npm run dev ``` ### 常见问题排查 1. **跨域问题**： - 确认代理配置正确 - 检查浏览器控制台报错信息 - 后端需设置 CORS 头部（即使使用代理也建议配置）： ```python # Flask 示例 from flask_cors import CORS CORS(app) ``` 2. **接口连接失败**： ```bash # 检查端口占用 lsof -i :5000 # Windows 使用 netstat -ano | findstr :5000 ``` 3. **请求路径问题**： - 开发环境使用 `/api/endpoint` - 生产环境需要配置反向代理（Nginx/Apache） 4. **Content-Type 配置**： ```javascript // 需要时添加请求头 headers: { 'Content-Type': 'application/json' } ``` 完整项目结构示例： ``` ├── src/ │ ├── utils/ │ │ └── request.js │ ├── App.vue │ └── main.js ├── vite.config.js └── package.json ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值