一、問題描述

一般情況下我們在Vue專案中使用vue-resource這個元件請求資料的時候，可能會直接使用以下程式碼：

this.$http.get("https://api.douban.com//v2/movie/top250")
  .then(function (reponse) {
    console.log(reponse);
  })

這裡我們使用的是get請求方法，如果請求的是本地資料，或者說著說請求的資料沒有跨域，使用get方法是沒有問題的。但是如果請求的是不同域的資料，就要受到同源策略的影響，請求不成功，並丟擲No ‘Access-Control-Allow-Origin’ 錯誤。比如我們使用上方的程式碼請求豆瓣的資料，那麼就會丟擲以下的錯誤。

二、解決方法

在Vue專案中受到同源策略的影響，使用get方法不能跨域請求資料，這個時候我們可以使用jsonp這樣一種模式（或者稱之為協議），來請求資料。例如我們要請求豆瓣的資料，只需將上述程式碼中的get給成jsonp即可：

 this.$http.jsonp("https://api.douban.com//v2/movie/top250")
   .then(function (reponse) {
     console.log(reponse);
   })

這樣就可以順利請求到豆瓣的資料：

三、補充說明

HTTP請求方法有多種：GET、POST、HEAD、OPTIONS、PUT、DELETE、TRACE、CONNECT等8種方法。我們在專案中使用最多的是GET和POST請求。

在上文中我們提到使用jsonp代替get可以實現跨域請求，但是我們要明確一點，get是請求方法，但是jsonp不是請求方法。jsonp是一種請求的協議，或者你也可以稱之為模式。

而且使用jsonp代替get之後，本質上使用的還是get請求方法，因為jsonp只支援get這一種網路請求方法。關於jsonp的更多知識，推薦你閱讀文章：說說JSON和JSONP，也許你會豁然開朗