时间戳

首页 > 解决方案 > Angular AWS 被 CORS 策略阻止

angular - Angular AWS 被 CORS 策略阻止

问题描述

我创建了一个访问 Lambda 函数的 AWS API 网关。

如果我尝试从 Postman 调用网关，一切正常。但是当我尝试使用我的 Angular 应用程序调用 get API 时，我收到以下错误：

从源“http://localhost:8100”访问“apiUrl”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我使用以下代码创建我的 Angular 请求：

let params = new HttpParams().set('username','test@mail.com').append('password','1234');
this.http.get(apiUrl, { params }).subscribe(
  res => { alert('success'); },
  err => { alert('fail'); }
)

我已经在我的 API 网关中启用了 CORS。我希望你们能帮助我调用我的 AWS API。

我当前的选项方法如下所示： Integration Response

标签： angularamazon-web-servicescors

解决方案

您在 Angular 中正确地形成了您的请求。该问题与您的应用程序的客户端无关，而与您在 AWS 中设置 CORS 支持的方式有关。

Postman 可以正常访问您的 API，因为 Postman 没有执行 Web 浏览器执行的“同源”策略，即它完全绕过了 CORS。

为使浏览器成功发出请求，API 必须使用 200 返回码响应同一端点上的 OPTIONS 请求，并在该响应中包含 Access-Control-Allow-Origin 标头，指示请求的实际来源或通配符“*”。

AWS 在这方面的文档非常清晰和广泛。

推荐阅读