axios不发起请求_axios 发 post 请求的问题
要做的需求很简单,就是一个axios的简单请求,如下:
axios({
method: 'post',
url: '/api/login',
data: {
username,
pwd
}})
但是问题来了,后端说取不到我的username和pwd,问题又来了,我确实传过去了,黑人问号脸???,然后我找了一下资料,终于把值成功传过去,后端也成功取到了。
原因:后端用的框架是 spring mvc ,并且在这个方法上使用了注解 @RequestParam,这个就只能从请求的地址中取出参数,也就是只能从 username=admin&pwd=11111 这种字符串中解析出参数,也就是编码格式(content-type)为:application/x-www-form-urlencode。(表单form的enctype属性的编码方式有两种:application/x-www-form-urlencode和multipart/form-data),但是axios会把请求的数据转换成json格式,即为:application/json;charset=UTF-8,所以格式不同,就取不值了。
解决方案我尝试了有6种,大家可以根据自己的需求选择:
1.用 URLSearchParams
let param = new URLSearchParams()param.append('username', 'admin')param.append('pwd', 'admin')
axios({
method: 'post',
url: '/api/login',
data: param
})
缺点:兼容性不太好。
2.设置Content-Type
(1)axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者:{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
(2)引入 qs (这个库是 axios 里面包含的,直接引入,无需下载)。
import Qs from 'qs'let data = {
"username": "admin",
"pwd": "admin"
}axios({
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3'
},
method: 'post',
url: '/api/login',
data: Qs.stringify(data)
})
3.设置transformRequest
因为我们的请求编码格式是被axios更改的,那我们也可以进去设置,如下:
import Qs from 'qs'axios({
url: '/api/login',
method: 'post',
transformRequest: [function(data){
// 对 data 进行任意转换处理
return Qs.stringify(data)
}],
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3' },
data: {
username: 'admin',
pwd: 'admin' }
})
4.重写一个 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;
}],
})
5.axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");
6.我们知道服务端用的是 @RequestParam(通过字符串解析出参数) ,其实还有另一种是 @RequestBody(从请求体中获取参数),让后端改成 @RequestBody也可以。
axios不发起请求_axios 发 post 请求的问题相关推荐
- axios发送post数据后台收不到_axios 发 post 请求,后端接收不到参数的解决方案
问题场景 场景很简单,就是一个正常 axios post 请求: axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: ...
- axios get请求_Axios使用指南
阅读本文约需要8分钟 大家好,我是你们的导师,我每天都会给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).新的一周开始了,上次给大家分享了JS系列之表单事件,今天跟大家分享一下Axios使 ...
- axios获取发起请求的地址 vue_axios安装,发送地址请求实例
安装 先在当前项目安装axios cnpm i axios -S get请求 axios.get('http://localhost:8082/getAllStudents').then(res=&g ...
- axios 配置loading_vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- 发起http请求_关于HTTP请求发起和响应你了解多少
在一个web程序开发中,一般都有前端和后端之分,前端负责向后端请求数据和展示页面,后端负责接收请求和做出响应发回给前端,他们之间的协作桥梁是API,而API其实就是一个URL,作为HTTP连接的一种具 ...
- 他妈的 Python(1):怎么发起一个同步的 HTTP 请求
他妈的 Python(1):怎么发起一个同步的 HTTP 请求 作者:大锐哥 地址:http://blog.csdn.net/prevention 转载注明来自:http://blog.csdn.ne ...
- axios请求发送两次请求_vue使用axios发送请求,都会发送两次请求
vue 使用axios,每次的请求都会发送两次,第一次的请求头为options CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sha ...
- Ajax请求,JQuery发送请求,Axios请求,Fetch请求总结
常见的请求方式 1.Ajax请求 定义: 同步与异步的区别: Ajax的工作原理: 实现AJAX的基本步骤: Get请求: Post请求: 2.JQuery发送请求 Get请求: Post请求: 3. ...
- RocketMQ源码(十七)—Broker处理DefaultMQPushConsumer发起的拉取消息请求源码
转载来源: RocketMQ源码(19)-Broker处理DefaultMQPushConsumer发起的拉取消息请求源码[一万字]_刘Java的博客-CSDN博客 此前我们学习了RocketMQ源码 ...
最新文章
- python打印出指定目录下的所有文件夹和文件名(递归实现)
- 新的JMetro JavaFX 11兼容版本
- 腾讯云全面更新数据智能服务全景图!
- 登录页面(通过数据库查询密码是否正确)
- ProxyPass与ProxyPassReverse及ProxyPassMatch的概述
- oracle并行查询结果不唯一,Oracle数据库并行查询出错的解决方法
- Non-parseable POM C:\Users\admin\.m2\repository\org\springframework问题解决方案
- 2019年7月30日星期二(数据结构)例题代码
- Entity Framework 6+ 连接Mysql
- python 第一行 报错_解决python的空格和tab混淆而报错的问题
- 新版Android使用微桌面,微桌面是什么?微信正开发安卓“微桌面”
- pr下载与安装(含安装包百度网盘链接)
- python pandas库的介绍和使用
- 虚拟机调整C盘分区大小的取巧方法
- 激光雷达考试基础知识
- Idea的全局搜索快捷键
- Excel受保护的工作表怎么操作?
- 在美国学CS能挣多少钱?美国IT公司标准 offer package详细数字及绿卡政策 | 美国留学申请与就业找工作咨询博客|Warald|一亩三分地论坛...
- 硬币面值组合(上台阶)
- 实习周报 | 3rd week | 2021.4.19 - 4.23 | 文本摘要,ES语义搜索,SOTA SA
热门文章
- LeetCode题组:第1162题-地图分析
- anaconda下安装pytorch
- 基于DOS命令打war包
- Pandas读取中文文本文件报错:python ‘utf-8‘ codec can‘t decode byte 0xe3 in position 0: unexpected end of data
- word使用技巧(不定时更新)
- 实操将TensorFlow模型部署成Docker服务化
- 突破NP屏蔽,实现按键模拟!
- HBase Filter及对应Shell--转
- 使用JSON Web Token设计单点登录系统--转
- 马云:员工的离职原因--转载