axios 发 post 请求,后端接收不到参数的完美解决方案

 更新时间:2022年12月01日 10:36:14   作者:Never Yu  
这篇文章主要介绍了axios 发 post 请求,后端接收不到参数的解决方案,场景很简单,就是一个正常 axios post 请求,本文给大家分享问题原因分析及解决方案需要的朋友可以参考下

问题场景

场景很简单,就是一个正常 axios post 请求:

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: {
		username,
		pwd
	}
})

后台说没有接收到你的传参。

这就有点奇怪了,我看了一下浏览器的请求信息是 OK 的,参数都是有的,而且之前这样用 axios 也没有这个问题。

但是这个接口是通用的,别人都用了,是 OK 的,接口没问题。

问题原因

要点1

原因就是这次的接口使用 java spring mvc
并且在这个方法上使用了注解 @RequestParam

那么这个是什么意思呢,这个是只能从请求的地址中取出参数,也就是只能从 username=admin&password=admin 这种字符串中解析出参数。

要点2

我们还可以看到我们这次请求的 Content-Type:

application/json;charset=UTF-8

关于这一点需要说明的是:

1、axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据

2、在 axios 源码中发现下面这段内容:(很关键)

我们知道在做 post 请求的时候,我们的传参是 data: {...} 或者直接 {...} 的形式传递的,嗯,就是下面这两种形式

【第一种形式】

【第二种形式】

非常的刺激,这两种形式无一例外都触发了 axios 源码中【很关键】的那一段代码

问题分析

也就是说,我们的 Content-Type 变成了 application/json;charset=utf-8
然后,因为我们的参数是 JSON 对象,axios 帮我们做了一个 stringify 的处理。
而且查阅 axios 文档可以知道:axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。

那么,这就与我们服务端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。

解决方案

解决方案一

【用 URLSearchParams 传递参数】

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
	method: 'post',
	url: '/api/lockServer/search',
	data: param
})

需要注意的是: URLSearchParams 不支持所有的浏览器,但是总体的支持情况还是 OK 的,所以优先推荐这种简单直接的解决方案

解决方案二

网上有很多方案说使用
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
我试了一下,其实这样还是不行的
【还需要额外的操作,(我们要将参数转换为query参数)】
引入 qs ,这个库是 axios 里面包含的,不需要再下载了。

import Qs from 'qs'
let data = {
	"username": "admin",
	"pwd": "admin"
}

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: Qs.stringify(data)
})

解决方案三

既然 axios 源码中有那么一段【很关键】的代码,那么,我们也可以通过修改 transformRequest 来达到我们的目的。

在 axios 的请求配置项中,是有 transformRequest 的配置的:

这里写图片描述

OK,那么现在我们的请求就可以写成下面这个样子了:

import Qs from 'qs'
axios({
	url: '/api/lockServer/search',
	method: 'post',
	transformRequest: [function (data) {
	    // 对 data 进行任意转换处理
	    return Qs.stringify(data)
    }],
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	data: {
	    username: 'admin',
		pwd: 'admin'
	}
})

解决方案四

【重写一个 axios 实例,重新实现属于我们自己的 transformRequest】

import axios from 'axios'
let instance = axios.create({
	transformRequest: [function transformRequest(data, headers) {
	    normalizeHeaderName(headers, 'Content-Type');
	    if (utils.isFormData(data) ||
	      utils.isArrayBuffer(data) ||
	      utils.isBuffer(data) ||
	      utils.isStream(data) ||
	      utils.isFile(data) ||
	      utils.isBlob(data)
	    ) {
	      return data;
	    }
	    if (utils.isArrayBufferView(data)) {
	      return data.buffer;
	    }
	    if (utils.isURLSearchParams(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      return data.toString();
	    }
	    /*改了这里*/
	    if (utils.isObject(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      let _data = Object.keys(data)
	      return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
	    }
	    return data;
	}],
})

解决方案五

axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");

解决方案六

我们知道现在我们服务端同学接收参数用的是 @RequestParam(通过字符串中解析出参数)
其实还有另一种是 @RequestBody(从请求体中获取参数)。

到此这篇关于axios 发 post 请求,后端接收不到参数的解决方案的文章就介绍到这了,更多相关axios 发 post 请求后端接收不到参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 手把手教你如何将html模板资源转为vuecli项目

    手把手教你如何将html模板资源转为vuecli项目

    Vue可以直接集成html,Vue就是前端框架,使用Vue做前端开发效率非常高,下面这篇文章主要给大家介绍了关于如何将html模板资源转为vuecli项目的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue3中reactive丢失响应式问题详解

    Vue3中reactive丢失响应式问题详解

    在vue3中,如果你用reactive声明了一个对象,用另一个对象直接给它赋值,那么它就会失去响应式,下面这篇文章主要给大家介绍了关于Vue3中reactive丢失响应式问题的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    这篇文章主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue中的MVVM模式使用及说明

    Vue中的MVVM模式使用及说明

    这篇文章主要介绍了Vue中的MVVM模式使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 关于Vue中axios的封装实例详解

    关于Vue中axios的封装实例详解

    这篇文章主要给大家介绍了关于Vue中axios的封装的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • Vue3中使用Pinia的方法详细介绍

    Vue3中使用Pinia的方法详细介绍

    这篇文章主要给大家介绍了关于Vue3中使用Pinia的相关资料,pinia是一个用于vue的状态管理库,类似于vuex,是vue的另一种状态管理工具,文中介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

    vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

    vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩,这篇文章给大家详细介绍了vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍,感兴趣的朋友一起看看吧
    2018-09-09
  • vuepress打包之后页面样式丢失问题的两种解决方式

    vuepress打包之后页面样式丢失问题的两种解决方式

    这篇文章主要介绍了vuepress打包之后页面样式丢失问题的两种解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue侧边栏动态生成下级菜单的方法

    vue侧边栏动态生成下级菜单的方法

    今天小编就为大家分享一篇vue侧边栏动态生成下级菜单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    这篇文章主要介绍了使用Vue+Django+Ant Design做一个留言评论模块,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论