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

Posted 2023-03-04

【中文标题】没有“访问控制允许来源”Angular 4 应用程序

【英文标题】：No 'Access-Control-Allow-Origin' Angular 4 app

【发布时间】：2017-11-10 21:41:51

【问题描述】：

我正在尝试访问此地址： http://52.208.91.209:3000/?paging=1

手动访问可以正常工作。 通过 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 代码跨域访问来自该服务器的响应。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有更多详细信息。

【参考方案2】：

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

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

【参考方案3】：

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

ng build --production -host=myDomain.com