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

感謝做者分享