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

1. 问题描述   

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

2. 问题分析

  1. html页面设置了
  2. 发送的是post请求
  3. servlet过滤器配置了setCharacerEncoding(“utf-8”)
  4. firebug下查看请求头信息发现明明是post请求,却把参数拼接在请求头状态行的url后面(但是实际上地址栏url后面并没有出现参数)

3. 解决

  上面条件全部满足,但是中文仍然是乱码(不是问号)
  Tomcat下前端使用vue-resource向后台servlet发送数据中文乱码_第1张图片
后来得到一个解决方案是去配置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属性上……

你可能感兴趣的:(错误解决方案)