axios 使用post方式传递参数,后端接收不到
最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,
vue axios post请求发送图片base64编码给后台报错HTTP 错误 414
请求一直报错,显示 request URI too large
后
台显示一直没有收到数据 参数为null。网上查看了很多资料,才知道axios post传参的问题。
this.axios.post( this.url_s+'/recipeController/findRecipe',{
params:{
page: this.nums,
openId: localStorage.getItem("openId"), //this.$route.query.openId
hospitalId:localStorage.getItem("hospitalId")
}
}).then(res=>{
Indicator.close()
//this.$layer.close();
if(res.data == 'no'){
this.nodata = true;
}else{
this.lists = res.data;
this.updatamore = true;
}
}).catch(err=>{
Toast('加载失败')
Indicator.close()
})
用post存在这个问题
一开始我是这么写的 ,post里面的数据放在params里面,这样是有问题的,在使用axios时,要注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。
因为params是添加到url的请求字符串中的,用于get请求。
而data是添加到请求体(body)中的, 用于post请求。
然后我把params改为了data,后台还是接收不到,查阅了很多资料,需要把Content-Type为application/x-www-form-urlencoded,
jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded,所以服务器能够正确解析,而使用原生ajax、axios请求时,如果不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。
解决办法:
一、URLSearchParams
1、在main.js里 设置配置,修改Content-Type
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;
2、在组件vue里
const url ='http://****你的接口****';
var params = new URLSearchParams();
params.append('key1', 'value1'); //你要传给后台的参数值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');
this.$axios({
method: 'post',
url:url,
data:params
}).then((res)=>{
});
这样后台就收到数据了 请求成功;不过这个方法兼容性非常不好,ie浏览器完全不兼容。
二、使用qs
安装qs,在 main.js里引入
import axios from 'axios';
import qs from 'qs';
Vue.prototype.$qs = qs;
在vue组件里面请求方法
let postData = this.$qs.stringify({
key1:value1,
key2:value2,
key3:value3,
});
this.$axios({
method: 'post',
url:'url',
data:postData
}).then((res)=>{
});
这样就?了
以上这个方式是网上查询的,实际我解决的是直接写一个params对象,将要传的参数添加到里面
var params = new URLSearchParams();
params.append('page', this.nums); //你要传给后台的参数值 key/value
params.append('openId', localStorage.getItem("openId"));
params.append('hospitalId', localStorage.getItem("hospitalId"));
console.log(params)
this.axios.post(this.url_s+'/recipeController/findRecipe',params).then(res=>{
Indicator.close()
//this.$layer.close();
if(res.data == 'no'){
this.nodata = true;
}else{
this.lists = res.data;
this.updatamore = true;
}
}).catch(err=>{
Toast('加载失败')
Indicator.close()
})
axios 使用post方式传递参数,后端接收不到的更多相关文章
- axios 使用post方式传递参数,后端接受不到问题
一.URLSearchParams var params = new URLSearchParams(); params.append('key1', 'value1'); //你要传给后台的参数值 ...
- axios 使用post方式传递参数,后端接受不到
参考 https://segmentfault.com/a/1190000012635783
- Axios 各种请求方式传递参数(非axios api 请求方式)
get delete 方法较为不同 get请求方式将需要入参的数据作为 params 属性的值,最后整体作为参数传递 delete请求方式将将需要入参的数据作为 data 属性的值,最后整体作为参数传 ...
- 把axios挂载到vue实例上面/==Axios 各种请求方式传递参数格式
/*ajax请求*/ import axios from 'axios' axios.defaults.baseURL = 'https://api.douban.com/v2/movie' ...
- axios 各种请求方式传递参数
get delete 方法较为不同 注意:每个方法的传参格式不同,具体用法看下方 get请求方式将需要入参的数据作为 params 属性的值,最后整体作为参数传递 delete请求方式将将需要入参的数 ...
- delphi的一些语法知识 以及参数传递问题,按引用方式传递参数,按值方式传递参数
//delphi中exit,abort,break,continue 的区别 exit: 退出函数体abort: 遇到异常,安静处理,就是不显示不提示break: 退出当前循环体,包括for ,whi ...
- Spring MVC前传递和后端接收的参数名不一致处理方式
前端传递的变量和后端接收的变量名字不一致时,用注解@RequestParam来实现数据的传递 例如:@RequestParam(value="id") //实现商品的分类目录展现 ...
- 关于C#控制台传递参数和接收参数
前言: 写了这么久程序,今天才知道的一个基础知识点,就是程序入口 static void Main(string[] args) 里的args参数是什么意思 ?惭愧... 需求: 点击一个button ...
- 复用$.ajax方式传递参数错误处理
1.封装后的方法,在 data:inData 传递参数的方式和一般不一样,如果不注意会出现错误. function getDataByJsonP(methName, inData, fn) { $.a ...
随机推荐
- 2018-2019 ACM-ICPC, Asia Jiaozuo Regional Contest
目录 Contest Info Solutions A. Xu Xiake in Henan Province D. Keiichi Tsuchiya the Drift King E. Resist ...
- SSH 远程上传本地文件至服务器
使用SSH命令行传输文件到远程服务器 以前一直在windows下用SSH Secure Shell连接远程服务器,它自带了一个可视化的文件传输工具,跟ftp差不多 但是它也存在一个缺陷,不支持编码 ...
- GoEasy实现websocket 推送消息通知到客户端
最近在实现一个推送功能,用户扫描二维码签到,后台及时将签到成功信息推送到浏览器端.排除了前端ajax轮询的方式,决定采用websocket及时推送. 于是发现了第三方websocket推送库GoEas ...
- 3-自定义构造方法和description方法
http://www.cnblogs.com/mjios/archive/2013/04/19/3031412.html -自定义构造方法和description方法 1 默认的构造方法是什么?有什么 ...
- Selenium执行cdp命令,driver.execute_cdp_cmd用法
Chrome自带的开发者工具DevTools功能非常强大.有时候我们在使用Selenium操作浏览器时需要通过调用一下DevTools的方法来完成一些设置,如模拟移动设备,弱网模拟等等. Seleni ...
- 域渗透-企业应用SAML签名攻击
在项目中遇到SAML企业应用 想留个后门时候一脸懵 随便的整理记录 记录项目中SAML渗透的知识点. 0x01 前置知识 SAML单点登陆 SAML(Security Assertion ...
- CodeForces 494B Obsessive String ——(字符串DP+KMP)
这题的题意就很晦涩.题意是:问有多少种方法,把字符串s划分成不重叠的子串(可以不使用完s的所有字符,但是这些子串必须不重叠),使得t串是所有这些新串的子串.譬如第一个样例,"ababa&qu ...
- 【原创】FltGetFileNameInformation蓝屏分析
FAULTING_IP: nt!SeCreateAccessStateEx+5b80564184 848788000000 test byte ptr [edi+88h],al TRAP_FRAME: ...
- AtomicInteger原理
AtomicInteger的原理 java的并发原子包里面提供了很多可以进行原子操作的类,比如: AtomicInteger AtomicBoolean AtomicLong AtomicRefere ...
- java中 label 配合 break continue 使用方法
转 https://www.jianshu.com/p/7954b61bc6ee java中 label 配合 break continue 使用的其实是比较少的. 这种做法在业务代码中比较少见. 在 ...