vue axios传参报错的解决方法

为什么jquery和axios用法类似，但是请求时传参类型却不同？

　　jquery默认 form Data（如：url？a=1形式）；

　　因为jquery在执行post请求时，会默认设置Content-Type为application/x-www-form-urlencoded，发送的参数为form Data形式，所以服务器能够正确解析；

　　而使用原生ajax、axios请求时，如果不显示的设置Content-Type，axios默认发送数据时，数据格式是application/json，控制台参数里显示Request Payload（即 json格式），而并非我们常用的Form Data格式。

　　既然我们知道axios post方法默认使用application/json格式编码数据，那么解决方案就有两种，一是后台改变接收参数的方法，另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded，这样就不需要后台做什么修改了。
---------------------

改变接收参数的解决办法：

　　1）URLSearchParams

var params = new URLSearchParams(); params.append('key1', 'value1'); //你要传给后台的参数值 key/value params.append('key2', 'value2'); params.append('key3', 'value3');

bug: ie浏览器完全不兼容。

2）qs qs.stringfy(para)即可；

但是JSON.stringify和qs.stringify虽然都是序列化，效果却不同，如下：

1)JSON.stringify： "{"a":"1","b":2}"

2)qs.stringify: 　　　 a=1&b=2

另，网上教程很多重新安装了 npm install qs --save, 需要注意的是axios里已经包含qs，不用重新安装；

3）In node.js, you can use the querystring module as follows:

4）

改变header头的解决办法： headers和transformRequest配合使用；

const axiosInstance = axios.create({

// axios实例配置

timeout: 15000,

method: 'post' ,

headers: {

'Content-Type' : 'application/x-www-form-urlencoded'

},

transformRequest: [ function (data) {

// 请求前参数序列化

return qs.stringify(data);

}]

});

另附：axios参数里的params和data区别：

在使用axios时，要注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。
params用于get请求，是添加到url的请求字符串中的，即是发送请求的查询参数对象，对象中的数据会被拼接成 url?param1=value1&param2=value2。。
而data是添加到请求体（body）中的，用于post请求。

参考：

https://github.com/axios/axios/blob/master/README.md#using-applicationx-www-form-urlencoded-format

转载于:https://www.cnblogs.com/juneling/p/10004255.html

vue axios传参报错的解决方法相关推荐

wordpress上传文件报错的解决方法（413 Request Entity Too Large、超过upload_max_filesize文件中定义的php.ini值）
报错:413 Request Entity Too Large 问题nginx是限制上传大小,解决方法如下: 打开nginx配置文件 nginx.conf, 路径一般是:/etc/nginx/ngin ...
解决POSTMAN传参报错，JSON parse error: Cannot deserialize instance of `java.util.ArrayList` out of START_OB
前言:使用POSTMAN自测代码以便前后端联调时,发送请求后,BOOM!!!服务器抛了个这样式的东西出来. Resolved [org.springframework.http.converter.H ...
vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法参考文章: (1)vue项目初始化时npm run dev报错webpack-dev-server解决方法 ( ...
vue项目Error: Cannot find module ‘xxx’类报错的解决方法
现发现只要是报错 Error: Cannot find module 'xxx'(例如 Error: Cannot find module 'webpack')这类的问题都可以用下面的方法解决. 报错 ...
K8S 1.18.0 以及KubeEdge 1.10.3 三机安装部署（含过程记录及遇到的报错和解决方法）
因为网络上大多数教程只有部署相关的命令,而无输入命令后正确界面的显示样例,因此在参考网络上教程并跟随实现的过程中,我将过程进行截图记录,供大家参考.希望对大家有帮助~ 一. K8S部署选用了三台虚拟 ...
idea项目提交到gitee以及出现提交出现的 Push rejected报错的解决方法
在提交项目到Gitee的时候出现:Push rejected 弹窗错误提示上传失败的解决方法. 今天就跟大家聊聊有关idea提交项目到gitee时出现 Push rejected报错的解决方法,希望 ...
docker pull下载镜像时的报错及其解决方法
docker pull下载镜像时的报错及其解决方法参考文章: (1)docker pull下载镜像时的报错及其解决方法 (2)https://www.cnblogs.com/it-artical/p ...
sqlserver 遇到以零作除数错误的处理不报错的解决方法
sqlserver 遇到以零作除数错误的处理不报错的解决方法参考文章: (1)sqlserver 遇到以零作除数错误的处理不报错的解决方法 (2)https://www.cnblogs.com/ ...
使用Navicat连接MySQL时出现2059报错的解决方法
使用Navicat连接MySQL时出现2059报错的解决方法参考文章: (1)使用Navicat连接MySQL时出现2059报错的解决方法 (2)https://www.cnblogs.com/ir ...

vue axios传参报错的解决方法

vue axios传参报错的解决方法相关推荐

最新文章

热门文章