没有“访问控制允许来源”Angular 4 应用程序答案

【问题标题】：No 'Access-Control-Allow-Origin' Angular 4 app没有“访问控制允许来源”Angular 4 应用程序
【发布时间】：2017-11-10 21:41:51
【问题描述】：

手动访问可以正常工作。通过 Angular 4 请求访问返回：

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://localhost:4200'。

我用谷歌搜索了几个小时，但没有找到解决方案。

我发现的唯一“解决方案”是使用 Allow-Control-Allow-Origin 插件。

我尝试访问的地址不是我的。

我只是在尝试使用它。

在使用 ng serve 和 Angular CLI 时，我什至读过代理，但没有完全理解。

我看到的所有解决方案都只是服务器端的响应头问题。但是，这不是我的服务器，所以我无法配置它。

任何帮助将不胜感激。谢谢。

【问题讨论】：

【解决方案1】：

您可以更改前端 JavaScript 代码，改为通过公共代理发出请求。

要尝试这样做，请将您的代码更改为使用以下 URL：

https://cors-anywhere.herokuapp.com/http://52.208.91.209:3000/?paging=1

这将导致请求转到 https://cors-anywhere.herokuapp.com，这是一个开放的 CORS 代理，可将请求发送到您想要的 http://52.208.91.209:3000/?paging=1 URL。

该代理获取响应，接受它并向其添加 Access-Control-Allow-Origin 响应标头，然后最终将其作为响应传递回您的请求前端代码。

所以最终因为浏览器看到带有Access-Control-Allow-Origin 响应标头的响应，浏览器允许您的前端 JavaScript 代码访问响应。

或者使用https://github.com/Rob--W/cors-anywhere/的代码或者类似的代码来设置你自己的代理。

在这种情况下，您需要一个代理，因为http://52.208.91.209:3000/?paging=1 本身不会发送Access-Control-Allow-Origin 响应标头——在这种情况下，您的浏览器将不允许您的前端 JavaScript 代码跨域访问来自该服务器的响应。

【讨论】：

【解决方案2】：

您无法从浏览器以您希望的方式访问该 API。有适当的安全措施来防止这种情况发生。如果您不控制数据源，则无法解决此问题。您唯一的选择是让您自己的服务器请求数据，然后通过您的服务器获取数据。

编辑：如果您只打算在本地运行它，您实际上可以这样做。 Chrome 具有忽略此安全措施的标志。如果您不打算在除您自己的机器之外的任何机器上使用此功能，您可以强制 chrome 在本地允许此功能。

【讨论】：

【解决方案3】：

我找到的解决方案是使用正确的主机构建我的项目

ng build --production -host=myDomain.com

【讨论】：