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

回答

相关问题