这两天学习vue写demo,没有服务器,便抓了网易新闻的数据。vue cli3.0 + 官方推荐的axios,设置了一下代理,十分方便的在dev环境下请求到了数据。然而还没来得及高兴:
惊了!什么情况?!去网易新闻官方的页面看来下,原来人家的是GBK页面,不是utf-8的,而axios默认是utf-8。
一开始认为,设置请求头,使服务器返回contentType为 'application/x-www-form-urlencoded;charset=utf-8',网上大部分文章也是这么说的。
那就改一下吧?然后一天的时间过去了...emmm....说起来你可能不信,据网上的大牛说axios的源码中,对get请求设置进行了很不友好的生硬处理,使之一切对get请求头的设置无效!这个bug据说存在了很长时间了,下面是github issues关于它的描述
https://github.com/axios/axios/issues/362
英文不是很好,用的翻译功能看的。
试了很多帖子中的方法,包括什么:params.inCharset='utf-8',
params.outCharset='utf-8'
还有设置
headers里加上
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
以及添加请求拦截器什么的,各种方法我都试了,然而对我遇到的问题还是无效,可能是不太对症吧,毕竟人家楼主都采纳了,应该是解决他们遇到的问题了
别人的路走不通,就想自己的办法吧:改请求头让服务器直接返回utf-8是不行事儿了,毕竟插件是别人的插件,服务器是别人的服务器,全给堵死了。那就请求回来转码试试吧。
axios使用说明中有:responseType 表示服务器响应的数据类型
我试了一下,有效。以此为契机,有如下方法
1 responseType: 'blob',
2 transformResponse: [function (data) {
3 let reader = new FileReader();
4 reader.readAsText(data, 'GBK');
5 reader.onload = function (e) {
6 console.log(reader.result);
7 }
8 return data;
9 }]
让返回类型为blob,然后按gbk编码进行转码。得到:
成功!
解决方法没写多少,可能很简单,可能在对协议的理解上就有错误,给大牛看也就是贻笑大方,但对我这个菜鸟来说真的费了不少时间。
记录一下历程吧,也让有同样遭遇的同仁能少受点苦(^-^)
如果有大牛看到了,希望告诉我在对 服务数据请求 的理解上有什么错误没有,谢谢