VueJS使用vue-resource使用webpack-simple dev服務器的CORS問題

Question

我有一個使用webpack-simple選項生成的Vue應用程序。我試圖做一個GET請求https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en，但我得到的錯誤：

XMLHttpRequest cannot load https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.

我使用VUE資源，並補充說：

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

這沒有任何影響。

我也添加了這個在webpack.config.js的devServer選項：

devServer: { 
    historyApiFallback: true, 
    noInfo: true, 
    headers: { 
    "Access-Control-Allow-Origin": "*" 
    } 
} 

那不是解決問題要麼;錯誤消息保持不變。

如何解決這個問題？

Answer 1

Access-Control-Allow-Origin是響應頭部服務器請求去必須發送。

https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en雖然不會發送Access-Control-Allow-Origin響應標頭，所以您需要通過代理進行請求。通過改變你的前端JavaScript代碼來改爲使用這個URL：

https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en 

試試這個，你的前端代碼將按預期工作。但要確保你第一次也刪除此：

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*' 

，它是將Access-Control-Allow-Origin頭到要求，作爲一個請求頭。但如上所述，Access-Control-Allow-Origin是一個響應標題。因此，通過將Access-Control-Allow-Origin添加到請求中，唯一的影響是您要觸發瀏覽器發送a CORS preflight OPTIONS request而不是發送您的GET。

順便說一句，你也可以刪除此：

headers: { 
    "Access-Control-Allow-Origin": "*" 
} 

所有這一切似乎做的是給Access-Control-Allow-Origin響應頭從自己的服務器後端添加到響應。但是你的前端代碼所要求的請求並不是你自己的服務器後端，而是它的https://api.forismatic.com/。

無論如何，https://cors-anywhere.herokuapp.com/https://api.forismatic.com/… URL將導致請求轉至https://cors-anywhere.herokuapp.com，這是一個開放/公開的CORS代理，它將請求發送到https://api.forismatic.com/api/1.0/?method=getQuote…。

當代理獲得響應時，它將接收並添加Access-Control-Allow-Origin響應標頭，然後將其作爲響應傳遞給請求的前端代碼。

該響應頭是Access-Control-Allow-Origin響應頭是瀏覽器看到的，所以瀏覽器顯示的錯誤信息現在消失了，瀏覽器允許您的前端JavaScript代碼訪問響應。

或使用https://github.com/Rob--W/cors-anywhere/等代碼來設置您自己的代理。

您需要代理的原因是，https://api.forismatic.com/api/1.0/?method=getQuote…本身不會發送Access-Control-Allow-Origin響應標頭，因此您的瀏覽器將拒絕讓您的前端JavaScript代碼訪問來自該服務器的響應。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS有更多細節。