Angular AWS 被 CORS 策略阻止

Posted 2023-03-04

【中文标题】Angular AWS 被 CORS 策略阻止

【英文标题】：Angular AWS blocked by CORS policy

【发布时间】：2019-06-26 21:52:35

【问题描述】：

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

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

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

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

let params = new HttpParams().set('username','[e-mail]').append('password','1234');
this.http.get(apiUrl,  params ).subscribe(
  res =>  alert('success'); ,
  err =>  alert('fail'); 
)

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

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

【问题讨论】：

响应的 HTTP 状态码是什么？

您找到解决方案了吗？

【参考方案1】：

您需要从您的 API（服务器端）发送响应，该响应需要包括：

'Access-Control-Allow-Origin':'*'

这是一个如何通过 Lambda(.js) 发送响应的示例：

function buildResponse(statusCode, body) 
  return 
    statusCode: statusCode,
    headers: 
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin':'*'
    ,
    body: JSON.stringify(body)
  

只需将其添加到您的 Lambda 代码中，并在您返回响应时调用它。

提示：statusCode 可能是 200，body 是你的“响应”。

【参考方案2】：

你在 Angular 中的代码没问题。

让参数 = 新的 HttpParams().set('username','[e-mail]').append('password','1234'); this.http.get(apiUrl, params).subscribe( res => alert('success');, 错误 => alert('fail');)

发送标头时出错。

在所需 API 的 AWS API 网关中，在左侧菜单中选择 Resources 选项卡。 GET 方法被选中 在Actions 下拉菜单中，单击Enable CORS。 在Access-Control-Allow-Headers 字段的最后，' 之前，用逗号分隔并添加 Access-Control-Allow-Origin。 在下面的字段中，Access-Control-Allow-Origin 应输入 '*' 使用Enable CORS and replace existing CORS headers 按钮配置设置

另外，在GET -> Integration Request -> HTTP Headers 中添加一个标题。 name 是 Access-Control-Allow-Origin 和 Mapped from 是 '*' 以及检查 Postmen 中的标题。用于测试。

【参考方案3】：

在 API Gateway 中的 Resources-->Actions 下。 Actions 下拉菜单有启用 CORS 的选项。检查是否启用了 CORS 并且您允许所有来源。

【参考方案4】：

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

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

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

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

【讨论】：

您好，我已经将选项添加到端点，并将 Access-Control-Allow-Origin 包含在标题中（问题中的屏幕截图）

如果关于这方面的“广泛” AWS 文档甚至是非常清晰的，那么从 AWS 自己的论坛到几乎任何地方，都不会有像我在 Internet 上看到的那么多人遇到同样的问题。如果***.com/users/982341/greybeardedgeek对AWS文档有具体明确的解释，可以参考一下。我根本没有发现什么清楚的。使用 CLI 可能更容易，但我发现 API Gateway 的图形用户界面充其量是令人困惑的。