我无法在 Angular 中获得 REST 服务响应

Posted 2023-03-04

【中文标题】我无法在 Angular 中获得 REST 服务响应

【英文标题】：I can't get the REST service response in Angular

【发布时间】：2017-06-27 13:09:38

【问题描述】：

在我们公司的 *** 中，我可以在 FF 和 Chrome 上调用 Web 服务（这是一个 REST 服务）。我需要从 Angular 2 连接到它。现在，我尝试以多种方式从 Angular 2 调用 REST 服务（位于 *** 内部），但我总是收到有关 CORS 的消息（“请求的请求中不存在‘Access-Control-Allow-Origin’标头资源。因此，不允许访问源“http://localhost:4200”。响应的 HTTP 状态代码为 401。”在 Chrome 中和“跨源请求被阻止：同源策略不允许读取位于 http://webwassvc-test.servizi.gr-u.it/essigEAIM/rest/monitoring/integrations/all?pag=1 的远程资源。（原因： CORS 标头 'Access-Control-Allow-Origin' 缺失）。”在 Firefox 中）。我尝试将 about:config:security.fileuri.strict_origin_policy 设置为 false，但没有帮助。 REST 服务器端的 sysadmin 告诉我他为 CORS（跨域）调用打开了服务器，所以我认为问题出在我端，但我不知道会是什么。有什么建议吗？

更新：我可以通过 php 作为中间件 (localhost/angular2_site/file.php) 访问 REST 服务并从中获取数据，但不能直接从 angular (localhost:4200) 获取数据。

【问题讨论】：

尝试在请求的头部添加Access-Control-Allow-Origin

您需要在您的 http 页面上有一个 Content Security Policy 元标记，并且您需要设置一个“Access-Control-Allow-Origin”标头。这两个你都有吗？

在你的 REST api 中，响应头应该有 Access-Control-Allow-Origin:localhost:4200

好像是REST服务器的系统管理员搞错了。如果该服务器实际上是为 CORS 调用打开的，它将发送一个 Access-Control-Allow-Origin 响应标头。但它没有发送该标头。您无法通过 javascript 代码在客户端解决这个问题。

@VladimirDespotovic 这不正常，但我想这取决于 REST 服务器的具体配置方式。它可能以某种方式将http://localhost 列入安全名单，但http://localhost:4200 却没有。或者可以想象，它可能被配置为不将Access-Control-Allow-Origin 响应标头发送到非端口 80 源（不知道为什么有人会这样配置，但谁知道呢）。

【参考方案1】：

另一种选择是使用代理或负载平衡器对其进行管理。

如果您使用 anuglar-cli 进行开发，您可以使用 angular-cli 的 Proxy To Backend 支持。 --proxy-config

来自 angular-cli 自述文件：

假设我们有一个在 http://localhost:3000/api 上运行的 api 服务器，我们想要 所有对 http://localhost:4200/api 的调用都转到该服务器。

我们在项目 package.json 旁边创建一个名为 proxy.conf.json 的文件 与内容

  "/api": 
    "target": "http://localhost:3000",
    "secure": false
  

您可以在此处阅读有关可用选项的更多信息 webpack-dev-server 代理设置

然后我们将 package.json 文件的启动脚本编辑为

"start": "ng serve --proxy-config proxy.conf.json"，现在运行它 npm 开始

所以最后你可以将你的服务称为：

getUsers() : Observable<any>
  return this.http.get('/api/users').map(res => res.json());

【讨论】：

嗨。我在另一个端口上有一个 REST 服务器，并且我的 Angular 在 4200 上运行。我需要来自该服务器的数据可供 Angular 使用（Angular 在端口 4200 上运行），而不是相反。

在 angular-cli 示例中，它在 4200 端口运行的 Angular 服务器和在 3000 运行的服务器服务。它在哪个端口运行你的？

Angular 和往常一样，在端口 4200 上。但是，我想从中获取数据的 Web 服务器位于 Web 上的某个地方，我可以使用 PHP 从中获取数据（如问题）。