Angular AWS 被 CORS 策略阻止

Question

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

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

CORS 策略已阻止从源“http://localhost:8100”访问“apiUrl”处的 XMLHttpRequest：请求的资源上不存在“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

Answer 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 是你的“响应”。

Answer 2

你在 Angular 中的代码没问题。

让参数 = 新的
HttpParams().set('username','test@mail.com').append('password','1234');
this.http.get(apiUrl, {params}).subscribe(
res => {alert('success');},
错误 => {alert('fail');}
)

发送标头时出错。

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

另外，在GET -> Integration Request -> HTTP Headers 中添加一个标题。 name 是 Access-Control-Allow-Origin 和 Mapped from 是 '*'

以及检查 Postmen 中的标题。用于测试。

Answer 3

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

Answer 4

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

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

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

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