Tomcat下前端使用vue-resource向后台servlet发送数据中文乱码

1. 问题描述 　　

　　由于当前在尝试使用vue.js捣鼓自己的一些小应用，为了vue的纯洁性，使用了vue-resource替代Jquery Ajax向后台servlet发送异步请求，平时一直用ajax的时候好好的，结果这下使用vue-resource竟然出现了请求参数中文乱码的情况。

2. 问题分析

html页面设置了

<meta charset="utf-8">

发送的是post请求

servlet过滤器配置了setCharacerEncoding(“utf-8”)

firebug下查看请求头信息发现明明是post请求，却把参数拼接在请求头状态行的url后面(但是实际上地址栏url后面并没有出现参数)

3. 解决

　　上面条件全部满足，但是中文仍然是乱码（不是问号）

　　


后来得到一个解决方案是去配置Tomcat目录下/conf/server.xml

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" />

这一行中添加

URIEncoding="utf-8"

属性，然后就没有中文乱码了。

但是纳闷的是，自从使用Tomcat以来，就从来没有动过这个文件，一直都是好好的没有中文乱码的情况，直到使用了vue-resource来代替Jquery Ajax才出现。

4 . 最终解决

　　后来发现tomcat一旦重启就会还原server.xml文件，这样一来上面的方法肯定就不可取了。最后发现问题还是出在vue-resouce的使用方法上，几乎搜索到的所有vue-resource的文档都是这么写的:

option对象的各属性及含义

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：’GET’, ‘POST’或其他HTTP方法
body	Object,FormDatastring	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credientials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

然而看得太快把参数全部放到了params属性上，

//我习惯用完整写法
vm.$http({
url : 'xx/xx/',
method : 'post',
params : someData,
emulateJSON : true
}).then((response) => {
console.log(response);
},(response) => {
alert("请求发生错误");
}).catch(function(response){
alert("发生异常");
});

这样虽然是post方法，但是参数还是会出现在url上，正确做法是放在data属性上……