解决axios请求后端返回中文数据乱码问题

在项目开发时，遇到后端返回的数据中文乱码，顿时惊了，什么情况？

于是尝试着去分析解决，一般浏览器的编码是UTF-8，且axios请求默认为utf-8，而后端的编码为GBK。所以出现乱码。尝试了无数种办法，如设置编码格式：Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'，都没有用，而且网上的解决方式比较少，看了axios的文档后，可以设置响应数据类型和进行响应前的数据处理，于是尝试在这个函数中进行解码

 

解决办法：

getAudio(ParaentID, ParaentName, paraentType) {
      const para = {
        DirId: ParaentID
      }
      var that = this
      that.$http({
        method: 'post',
        url: Url.broadcastApi + '/MLListDir;JSESSIONID=' + Url.JSESSIONID,
        data: para,
       // 以下为解决中文乱码的主要代码
        responseType: 'blob',
        transformResponse: [function(data) {
          var reader = new FileReader()
          reader.readAsText(data, 'GBK')
          reader.onload = function(e) {
            var music = JSON.parse(reader.result)
            console.log(music)
            that.data = music
          }
          return data
        }],
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        console.log('sss', res)
      })
    },

写完上面的可能你以为问题解决了，打印下数据，发现报错了，大概意思就是说数据不是blob类型，原因是mock模块会影响原生的ajax请求，使得服务器返回的blob类型改变，所以我们还需要在引入mock的地方把引入这句代码注释，一般是main.js中。

 

这样就好了，