vue-music 跨域獲取QQ音樂歌單接口

最近在看vue音樂APP視頻學習,需要跨域獲取歌單數據，視頻中老師是在build/dev-server.js文件配置跨域接口的，但是新版的vue-cli是沒有這個文件的，我的vue版本是"2.5.2"，

網上參考了反向代理的方法實現了跨域，覺得很有用，分享一下：

歌單url： https://y.qq.com/portal/playlist.html

舊版本目錄結構如下

相關配置文件如下：

var axios = require('axios') var port = process.env.PORT || config.dev.port
var autoOpenBrowser = !!config.dev.autoOpenBrowser
var proxyTable = config.dev.proxyTable

var app = express() var apiRoutes = express.Router() apiRoutes.get('/getDiscList', function (req, res) { var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' axios.get(url, { headers: { referer: 'https://c.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then((response) => { res.json(response.data) }).catch((e) => { console.log(e) }) }) app.use('/api', apiRoutes)

 

然而： 現在目錄結構改變后，原來的方法已經不能使用，找到一個好的解決方法：

使用ProxyTable反向代理：在這個index.js文件里面找到ProxyTable配置

index.js 配置如下：

    proxyTable: {
      '/api/getDiscList': {
        target: 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg',
        bypass: function (req, res, proxyOptions) {
          req.headers.referer = 'https://c.y.qq.com';
          req.headers.host = 'c.y.qq.com';
        },
        pathRewrite: {
          '^/api/getDiscList': ''
        }
      }
    },
//注意上面的寫法

回到文件： api/recommendj.s 

 

具體代碼如下：

import jsonp from '../common/js/jsonp'
import {commonParams, options} from './config' import axios from 'axios'

export function getRecommend() {
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
  const data = Object.assign({}, commonParams, {
    uin: 0,
    platform: 'h5',
    needNewCode: 1
  })
  return jsonp(url, data, options)
}

// ajax請求,不是jsonp請求了
export function getDiscList() {
  const url = '/api/getDiscList'
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

這樣就可以實現，結果如下：

也能拿到列表數據了：

 

json和jsonp的區別：

json是一種格式，jsonp是一種請求跨域資源的方式。

跨域：是指瀏覽器不能執行其他網站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。在跨域情況下，XMLHTTPRequest是不能發送異步請求的。
所謂同源是指域名、協議、端口均相同。

那么，同是跨域方法，為什么輪播圖的請求可以用jsonp的方式，而歌單的請求要使用反向代理，兩個都是跨域方法。

比較兩個請求jsonp和proxyTable反向代理的異同：

jsonp原理：<script>標簽里的src是沒有跨域限制的，<img>標簽里的src也是沒有限制的，我們書寫網頁的過程中不難發現這一點。jsonp就是通過在本站腳本創建一個<script>便簽，將地址指向第三方的API地址來達到第三方通訊的目的，並提供一個回調函數來接收數據，第三方響應為json數據的包裝，這個是jsonp名字的由來（json padding）
jsonp的局限性：只支持GET方式的HTTP請求，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題

反向代理：本方法是在自己的瀏覽器創建一個服務器，然后讓自己的服務器去請求目標服務器。而且跨域是針對JavaScript來說的，JavaScript 是插入HTML頁面后在瀏覽器上執行的腳本。服務器之間是可以隨便請求數據而不受限制的。我們通過自己創建的服務器去請求目標服務器，然后在從我們客戶端去請求我們自己創建的服務器，這就不存在跨域了。

 

參考文章：https://segmentfault.com/a/1190000013073545

感謝作者分享