CORS問題的WebPack

我有一個Angular2 /的WebPack項目，當我發出HTTP請求（即正從http://hawttrends.appspot.com/api/terms/谷歌趨勢），它具有以下錯誤響應：CORS問題的WebPack

XMLHttpRequest cannot load http://hawttrends.appspot.com/api/terms/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我想每一個解決方案在SO或者webpack倉庫中提供的。包括修改webpack.config.js和手動添加所需的標頭，或將報頭添加到我的我的角代碼內請求等

# webpack.config.js

devServer: { historyApiFallback: true, watchOptions: { aggregateTimeout: 300, poll: 1000 }, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" } }, 但是到目前爲止沒有運氣。

奇怪的是，當我檢查代碼並檢查網絡選項卡我看到的狀態代碼是200：

http://i.stack.imgur.com/k8Dir.png

但是控制檯顯示我前面提到的錯誤。

另外一件事值得一提的是，當我通過雅虎的API請求相同的URL，它工作正常，我沒有錯誤在我的控制檯：

https://query.yahooapis.com/v1/public/yql?q=select%20*%20%20from%20json%20where%20url%3D%22http%3A%2F%2Fhawttrends.appspot.com%2Fapi%2Fterms%2F%22&format=json&diagnostics=true&callback=

這是兩種不同的方法在同一個項目。對我來說，就像yahoo API可以處理CORS要求的地方一樣，webpack不能做到這一點。我對嗎？我不知道是否有人足以解釋爲什麼會發生這種情況，以及如何解決這個問題。謝謝。

p.s.我會很高興地在我的項目中使用雅虎apis，但事情是它重新定向和微調JSON響應有點不理想。除此之外，我對這個問題的根源以及我們可以解決的方式更感興趣。

編輯：原來，CORS和JSONP不在hawttrends.appspot.com/api/terms/ 我會深深apprecieted支持，如果有人告訴我，我還能如何獲得該URL的JSON我的內容角2碼。 tx

來源

2016-08-02 Sohail Salehi

嗨，@Sohail Salehi！你找到了解決辦法嗎？我有完全相同的問題，我會很高興，如果你可以分享一些知識... – vshnukrshna

嘗試在後端設置Access-Control-Allow-Origin來*。

來源

2016-08-02 10:27:31

感謝Olexa，但正如我在我的問題中提到，我已經嘗試了一套完整的標題已經。在webpack.config.js例如，我有這個捆綁： 'devServer：{ historyApiFallback：真實， watchOptions：{aggregateTimeout：300投票：1000}，頭：{ 「訪問控制允許來源」：「*」，「Access-Control-Allow-Methods」：「GET，POST，PUT，DELETE，PATCH，OPTIONS」，「訪問控制允許標題」：「X請求 - 類型，授權「 } }，' –

如果我正確理解你，你已經在你的前端添加了這些設置，但是你需要你的後端允許頭文件，起源和其他任何東西。前端是你的起源是這種情況下，你應該允許在後端 –

感謝您的迴應Olexa。我在這裏有兩個問題。 1）假設我們做的任何事情都會被翻譯成帶有一堆頭像的HTTP請求，那頭文件來自哪裏（前端/後端）真的很重要嗎？ 2）對於沒有後端的Web應用程序，你如何解決這個問題？再次感謝。 –

CORS問題的WebPack

回答

相關問題