解決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中。

 

這樣就好了，