在vue中使用axios實現跨域請求

需求分析：在專案中需要抓取qq音樂的歌曲列表的資料，由於要請求資料的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg。從qq音樂的官網上可以看到該請求的請求頭中的referer中的域名是y.qq.com(傳送請求頁面的域名)，而host的域名是c.y.qq.com（被請求頁面的域名），由於兩者不一樣，所以不能通過前端直接傳送請求給qq伺服器去拿資料。這時候需要伺服器做一個代理：即前端向其所在域的伺服器傳送一個請求，然後所在域的伺服器向qq音樂所在域的伺服器傳送請求，所在域的伺服器拿到資料後，然後返回給前端。

在vue中使用axios實現跨域請求。axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

中文手冊

下面介紹如何利用axios實現代理

1、首先使用npm安裝axios到本地專案中

npm install axios --save

2、然後，在build/webpack.dev.conf.js中引入axois

3、在在build/webpack.dev.conf.js檔案中的devServer物件新增屬性函式before(app){}

完整的程式碼如下

before(app){
      // 由於請求的referer和host不同，所以前端不能拿到資料，需要後端做一個代理
      //  後端向有資料的服務端傳送請求，拿到資料，然後前端在向自己的伺服器請求那資料
      //  這裡使用axios實現ajax請求：axios是一個基於promise的HTTP庫，可以用於瀏覽器和node.js
      // 在瀏覽器建立XMLHttpRequest物件，從node.js建立http請求
      app.get('/api/getDiscList',(req, res) => {//這裡的路徑是給前端傳送請求的url
        let url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg
        // axios傳送get請求，可以自己配置config
        axios.get(url, {
          headers: {
            'referer': 'https://c.y.qq.com/',
            'host': 'c.y.qq.com',
          },
          //  params是即將與請求一起傳送的url引數，無格式物件/URLSearchParams物件
          params: req.quest
        }).then((response) => {
          res.json(response.data)  //返回資料
        }).catch((error) => {
          console.log(error)
        })
      })
    }
 

4、在前端書寫js程式碼

1）定義一個recommend.js檔案，內容如下

import axios from 'axios'
//獲取歌曲列表的資料
//由於這裡使用了代理請求，所以前端的請求要改成ajax請求
export function getDisList() {
  const url = '/api/getDiscList'
  const data = {
    picmid: 1,
    rnd: Math.random(),
    g_tk: 5381,
    jsonpCallback: 'getPlaylist',
    loginUin: '0',
    hostUin: 0,
    format: 'json',
    inCharset: 'utf8',
    outCharse: 'utf-8',
    notice: 0,
    platform: 'yqq',
    needNewCode: 0,
    categoryId: 10000000,
    sortId: 5,
    sin: 0,
    ein: 29
  }
  //使用ajax請求，這裡用axios
  return axios.get(url, {
    params: data
  }).then((res) => {
    //  成功返回一個Promise物件
    return Promise.resolve(res.data)
  }).catch((error) => {
    console.log(error)
  })
}
 

2）在recommend.vue檔案的<script>中書寫下面內容

<script>
import {getDisList} from '../../api/recommend'
export default {
  //  獲取資料
  created() {
    this._getDiscList()
  },
  methods: {
    //  獲取歌單列表的資料
    _getDiscList() {
      getDisList().then((res) => {
        console.log(res)
      })
    }
  }
}
</script>

5、在瀏覽器console.log()輸出的內容

'MusicJsonCallback({"code":0,"subcode":0,"message":"","default":0,"data":{"uin":0,"categoryId":0,"sortId":5,"sum":0,"sin":0,"ein":0,"list":[]}})'

即輸出的是jsonp的格式，即字串

6、將返回的資料設定成json的格式：由於返回的資料是字串，那麼可以對其進行擷取，在利用JSON.parse()將字串轉換成json的形式

<script>
import {getDisList} from '../../api/recommend'
export default {
  //  獲取資料
  created() {
    this._getDiscList()
  },
  methods: {
    //  獲取歌單列表的資料
    _getDiscList() {
      getDisList().then((res) => {
        console.log(res)
        let num1 = res.indexOf('(')
        let num2 = res.indexOf(')')
        let resultData = JSON.parse(res.substring(num1 + 1, num2))
        console.log(typeof(resultData))
        console.log(resultData)
      })
    }
  }
}
</script>

輸出如下

以上大概就是利用axios實現服務端的代理請求