vue音樂APP使用jsonp和反向代理抓取QQ音樂歌單列表數據的區別

我是初學者，有什麼錯誤的請你們指教！
最近在看vue音樂APP視頻學習的時候發現老師文件目錄結構和我不同，由於webpack版本更新了可能，老師配置跨域接口的文件我沒有，後來我用之前搭建的一個項目裏反向代理的方法實現了跨域。個人build目錄結構以下

在這個index.js文件裏面找到ProxyTable配置

再回到這個文件

配置以下：

記住params這個名字千萬不能寫錯，我由於把它寫成了param，致使請求參數都沒有傳過去，找問題的能力太差，最終在header裏面發現了，回想起教程視頻里老師提醒過這個。

（你們很容易查到：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頁面後在瀏覽器上執行的腳本。服務器之間是能夠隨便請求數據而不受限制的。咱們經過本身建立的服務器去請求目標服務器，而後在從咱們客戶端去請求咱們本身建立的服務器，這就不存在跨域了。

歌單URL：https://y.qq.com/portal/playl...
請求頭

輪播圖URL：https://m.y.qq.com/
請求頭

在HTTP請求頭裏referer是表明這個請求是請哪一個URL過來的origin是在HTML5中跨域操做所引入的，當一個連接或者XMLHttpRequest去請求跨域操做，瀏覽器事實上的確向目標服務器發起了鏈接請求，而且攜帶這originhost在視頻裏存在歌單的請求頭裏，可是如今發現沒出現，可能隱藏了，可是我在反向代理ProxyTable裏設置了這個參數是一樣能夠請求成功的。這個參數表示了客戶端指定了本身想訪問的服務器地址，只要咱們使用反向代理向改服務器發送相同的請求頭，就能夠成功抓取數據到數據，由於目標服務器沒法區分是否來自它自己服務器發送的請求。