axios post 请求后端参数为null解决方案

最新推荐文章于 2025-05-01 05:15:00 发布

weixin_30896763

最新推荐文章于 2025-05-01 05:15:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签：后端 javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/oscar1987121/p/10496537.html

本文介绍了解决axios在POST请求中参数丢失的问题，通过将参数转换为FormData对象或使用qs模块进行字符串化，确保后端能正确接收。适用于前后端分离项目的参数传递优化。

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

先看看官方教学请求写法

axios.post('http://xxx.xxx.xxx.xxx:xxxx/xx', {'id': 'test'}).then(function (res) {
    console.log(res)
  }).catch(function (error) {
    alert(error)
  })

结果后端接收到请求后，从HttpServletRequest获取的参数居然是null，这里记录一下，怎样解决这个问题，免得以后忘记，原因可以网上找找

这是后端的接收请求代码

 @RequestMapping(value="/test",method= RequestMethod.POST)
    public String test(HttpServletRequest request){
        String id = request.getParameter("id");
        System.out.println(id);return "";
    }

方法1：

在前端发送axios的参数改成一个FromData对象，如下：

var f = new FormData()
f.append('id', 'test')

axios.post('http://xxx.xxx.xxx.xxx:xxxx/xx', f).then(function (res) {
    console.log(res)
  }).catch(function (error) {
    alert(error)
  })

方法2：

使用方法1后，发现如果我已经有一个对象，每次请求都需要重新拆开里面的内容，重新放到FormData不就和麻烦，所以就找来了qs模块帮忙实现对象转换

第一步就是安装qs

npm install qs --save-dev

第二步，引用qs

import qs from 'qs'

//Vue全局对象可用
Vue.prototype.$qs = qs

第三步调用

var test = {'id', 'test'}

//这里的this是Vue对象，
axios.post('http://xxx.xxx.xxx.xxx:xxxx/xx', this.$qs.stringify(test)).then(function (res) {
    console.log(res)
  }).catch(function (error) {
    alert(error)
  })

总结：网上还有很多方式，不过本人觉得这个方式最容易，改动最少，所以就使用以上两种方法了，使用这两种方法就能后台就能成共获取到数据了

转载于:https://www.cnblogs.com/oscar1987121/p/10496537.html