Angular 应用程序无法从 Cloudflare 背后启用 CORS 的站点获取数据

Posted 2023-03-04

【中文标题】Angular 应用程序无法从 Cloudflare 背后启用 CORS 的站点获取数据

【英文标题】：Angular application can't get data from CORS-enabled site behind Cloudfare

【发布时间】：2021-12-15 16:10:21

【问题描述】：

我在从 Angular 访问启用 CORS 的网站时遇到问题。通过浏览器从端点获取 JSON 数据是没有问题的，但是从 Angular 获取它是不可能的。总是显示问题：

从源“http://localhost:4200”访问“***”处的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制允许来源” 请求的资源上存在标头。

这是我的服务：

export class GetService 
  private url = '***'
  headers = new HttpHeaders( 'Access-Control-Allow-Origin': '*' );

  constructor(private http: HttpClient)  

  getList(): Observable<List[]> 
    return this.http.get<List[]>(this.url + 'list/',  headers: this.headers );
  

我已经试过了：

如上所示将标头 Access-Control-Allow-Origin 设置为 *（我也尝试过不使用标头） 检查其他标头设置（主机、用户代理等） built-in proxy

还是什么都没有。使用内置代理我得到其他错误：

请启用 cookie。 错误 1003 射线 ID：*** • 2021-10-31 15:54:16 UTC 不允许直接 IP 访问 发生了什么？ 您已请求一个属于 Cloudflare 网络的 IP 地址。必须提供有效的 Host 标头才能到达所需的网站。 我能做些什么？ 如果您有兴趣了解有关 Cloudflare 的更多信息，请访问我们的网站。 Cloudflare Ray ID：*** • 您的 IP：*** • Cloudflare 的性能和安全性

我仍然可以通过直接向浏览器键入端点地址来获取数据，所以我假设我必须以某种方式欺骗端点，浏览器正在连接到它，而不是 Angular 应用程序。我能做什么？

【问题讨论】：

你的后端是什么？弹簧靴还是什么？

我不知道 - 我刚刚得到了端点地址

始终应从服务器端启用 cors

【参考方案1】：

您没有在客户端（角度）上设置“Access-Control-Allow-Origin”：“*”，而是在服务器上设置。

如果您可以控制服务器，请将其添加到您的服务器。

如果您无法控制服务器，请创建一个angular proxy configuration。

需要在所有环境的所有 Web 服务器上重复此代理配置。

【讨论】：

我做了一个角度代理配置，我尝试了重写路径的方式，现在它看起来像这样： "/api/*": "target": "www.** *", "secure": false, "logLevel": "debug", "changeOrigin": true, "pathRewrite": "^/api/list": "/product/list", "^/api/formats" : "/product/formats", "^/api/papers": "/product/papers" ，所以当我进入 localhost:4200/api/list 它显示来自端点的输出没有任何错误 - 它应该是。待续……

但主要问题是，当我想通过服务获取数据时，出现错误“在 'www.***/product/list' 处访问 XMLHttpRequest（重定向自 '@987654324 @) from origin 'localhost:4200' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。”

您有没有，例如，在本地运行的 node.js 后端快速服务器？如果是这样，它在本地主机上运行什么端口？您向哪个 URL 发出 HTTP 请求？代理背后的想法是您将请求转发到后端服务器，然后后端服务器可以向任何东西发出请求，因为后端服务器不受 CORS 的约束

老实说，我想您可以代理到任何域并跳过拥有自己的 BE 服务器 - 我真正需要知道能够提供帮助的是..... (1) 什么域和您的应用程序在端口上运行吗？本地主机：4200 我假设？ (2) 您向哪个 URL 发出 HTTP 请求？

我无权访问服务器。它是像 www.emp****oto.pl 这样的公共领域（我不想在这里放完整地址）。所以后端不在本地，我的前端 Angular 应用程序（启用了代理）在 localhost:4200 上。仍然很有趣，为什么我可以通过浏览器访问该端点，但不能从 Angular 服务访问。