这两天学习vue写demo,没有服务器,便抓了网易新闻的数据。vue cli3.0 + 官方推荐的axios,设置了一下代理,十分方便的在dev环境下请求到了数据。然而还没来得及高兴:

axios 返回json axios 返回值乱码_gbk

惊了!什么情况?!去网易新闻官方的页面看来下,原来人家的是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 返回json axios 返回值乱码_vue-cli 3.0_02

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编码进行转码。得到:

axios 返回json axios 返回值乱码_gbk_03

成功!

解决方法没写多少,可能很简单,可能在对协议的理解上就有错误,给大牛看也就是贻笑大方,但对我这个菜鸟来说真的费了不少时间。

记录一下历程吧,也让有同样遭遇的同仁能少受点苦(^-^)

如果有大牛看到了,希望告诉我在对 服务数据请求 的理解上有什么错误没有,谢谢