webpack.config.js

Question

我有一个Angular2 / webpack项目，当我发出HTTP请求（即从http://hawttrends.appspot.com/api/terms/获取谷歌趋势）时，它会响应以下错误：

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

但控制台显示我之前提到的错误。

另一件值得一提的是，当我通过Yahoo 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。我很乐意在我的项目中使用yahoo apis，但事情是重新定位并弄乱json的响应有点不理想。此外，我对这个问题的根本原因以及我们可以修复它的方式更感兴趣。

编辑：原来hawttrends.appspot.com/api/terms/不支持CORS和JSONP 如果有人告诉我如何在我的angular 2代码中获取该URL的json内容，我将深感欣慰。 TX

Answer 1

尝试在后端设置Access-Control-Allow-Origin为*。

Webpack中的CORS问题

webpack.config.js

1 个答案: