在vue3中前端发起的request请求只携带一个参数，后端SSM框架如何用@RequestParam接受参数

于 2024-07-17 09:58:56 发布
阅读量234 收藏
点赞数 1
文章标签： 前端 spring 后端 spring cloud spring boot mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74345597/article/details/140486156
版权

对于网上最经常使用的request.js工具类本质上使用axios发起请求，在使用该工具类的情况下我发起一个像后端传递一个参数的前端请求

出现了400报错信息

后端没有接受到参数，这里后端原先使用的时@RequestParam注解，一直不明白为什么接收不到参数，经过查询资料得到，是因为前端发起请求的请求头的原因

因为前端发送请求时的content-type为 application/json 类型
而@RequestParam 能接收的content-type为application/x-www-form-urlencoded

解决方案可以采用@RequestBody注解，直接使用基础类型封装参数，修改前：

修改后：

随后参数被后端正确接收

懒惰的cv怪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码.zip
10-24
《基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码解析》 图书管理系统是信息化时代中常见的应用，它能够有效地管理和组织大量的图书信息，为用户提供便捷的查询、借阅、归还等功能。本系统采用的是经典的...
vue传参
w_t_y_y的博客
07-14 1256
一、后端：现有两个接口， package com.demo.rest; import com.demo.dto.UserDTO; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; impo
vue 前端传参到后台的几种方式
m0_59259076的博客
05-23 4829
第一种：路径传参 js: // 下拉框数据 export function getUnits(userId,unitCode) { return request({ url: `rfs/ledger/getUnits/${userId}/${unitCode}`, method: 'get' }) } 往vue组件页面导入js ： import { getUnits, resourceSummaryByUnicode } from '@/api/r
Vue3项目基于Axios封装request请求
最新发布
洛*璃的博客
07-13 894
在的项目开发中，使用进行请求是非常常见的作法，为了更方便开发者更高效的进行代码编写和项目的维护，可以通过再次封装来实现。在本文中，博主将详细指导你如何在自己的项目中使用二次封装请求。
Vue3-使用axios发起网络请求
One is never too old to learn
03-20 1万+
axios发送网络请求，axios的请求拦截器和响应拦截器配置
Vue请求传递参数
IT__learning的博客
03-03 1万+
一、get请求 get请求没有请求体，传递的参数是添加到url字符串的后面：url?name=value&name1=value1。 1、直接拼接 axios({ method: "get", url: "http://localhost:1111/01/zc?yhm=lhj&pwd=123", //参数拼接在url后面 }).then(function(resp){ console.log(resp.data) }) 参数附在url后面 携带的参数 2、params属性
vue3二次封装axios请求，分body和query的请求类型
qq_48647907的博客
08-29 430
https/department.js(data是对象)方式一(page、size是传给后端的参数)方式二(data是对象)
vue3中接口明明正确，调用却报错，接口的参数采用什么形式传入，用formdata还是包裹成对象？
qq_37967853的博客
11-01 517
vue3中接口明明正确，调用却报错，接口的参数采用什么形式传入，用formdata还是包裹成对象？
基于后端SSM框架和前端Vue+Element-UI的图书管理系统.zip
07-08
本文将详细介绍一个基于SSM（Spring、SpringMVC、MyBatis）后端框架和Vue+Element-UI前端框架的图书管理系统。 首先，SSM框架是Java Web开发中广泛使用的三大组件的组合，即Spring作为核心容器，负责管理对象和依赖...
vue中get请求如何传递数组参数的方法示例
10-16
本篇将详细介绍如何在Vue中配置axios，使其能够正确地将数组作为GET请求的参数传递给后端。 首先，问题在于当我们尝试像这样传递一个包含数组的参数： ```javascript let params = { statusList: ['OVERDUE', '...
[ vue ] axios 发送 POST 请求，后端不能通过 HttpServletRequest 获取参数
01-03
public Result admLogin(HttpServletRequest request, HttpServletResponse response, String username, String password){ log.info(用户名：{}，密码：{},username,password); if(username.isEmpty() || ...
基于Vue和SSM框架的康养App后端源码，集成JWT双Token与WebSocket消息推送
03-25
项目概述：本移动端康养App后端采用Java语言开发，基于Vue前端技术与SSM（Spring、SpringMVC、MyBatis）后端框架构建。项目共包含323个文件，其中主要包括88个图片资源文件（png、jpg），84个class文件，42个Java...
请求体只能获取一次的解决方案
weixin_52195362的博客
01-30 1067
请求体只能获取一次的解决方案
vue组成部分：前端后端调用方法传参（实操基础版）
SoulNone的博客
02-05 5780
vue组成部分：前端后端调用方法传参（实操基础版）
vue路由3种传参方式
tanqin的博客
10-21 335
vue路由传参3中方式：query传参1种、params传参2种。
vue传参的方式（params query ）
zhanggei的博客
09-03 833
vue传参主要有两种方式: params query 其中这两种方式又有三种传参行式: Params : 1.router-link 声明式导航形式传参 (在路径中显示参数, 刷新页面参数不会消失) <router-link :to='你要请求的路径'></router-link> 2.声明式导航传参 通过path匹配路由 (在路径中显示参数, 刷新页面参数不会消失) this.$router.push({ path: `你...
requestbody requestparam pathvariable前端端实战，让你彻底了解如何传值
m0_48069349的博客
04-06 2022
这个文章分为原理篇和实战篇，如果你只想知道如何使用，可以直接跳转到实战篇，这里会用springboot3加vue3来演示如何进行一个传值。Axios方法后端参数描述无发送GET请求，从指定的URL获取数据。发送GET请求，从指定的URL获取数据，并在URL中添加查询参数，后端通过获取这些参数的值。请求体中的数据发送POST请求，将数据作为请求体发送到指定的URL。发送PUT请求，将数据作为请求体发送到指定的URL，路径中的id变量对应后端的。发送DELETE请求，从指定的URL删除资源，路径中的。
vue使用axios发送post请求携带json body参数，后端使用@RequestBody进行接收
热门推荐
见证自己学习,成长的记录
02-17 1万+
最近在做自己项目中，做一个非常简单的新增用户场景，但是使用原生axios发送post请求的时候，还是踩了不少坑的。唉，说多了都是泪，小小一个新增业务，在自己前后端一起开发的时候，硬是搞了好久。下面就把问题总结分享下，防止后人再踩坑。首先先看下我的接口定义吧。其实就是一个很简单的新增，参数也不复杂。
使用@PostMapping并用@RequestParam接受参数时，前端vue怎么写axios请求传值
04-03
在Vue中使用axios发送POST请求并用@RequestParam接受参数，可以这样写： ```javascript // 在Vue组件中引入axios import axios from 'axios'; // 通过axios发送POST请求 axios.post('/api/post', { // 传递的参数 name: '张三', age: 20 }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 其中，`/api/post` 是后端接口的地址，`name` 和 `age` 是传递的参数名和值。 需要注意的是，如果要在请求头中加入 CSRF Token，可以在 `main.js` 中设置全局的axios默认值： ```javascript import axios from 'axios'; axios.defaults.headers.common['X-CSRF-TOKEN'] = 'token'; ``` 其中，`token` 是你的CSRF Token的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值