具有身份验证 Angular2 的 CORS AWS API 网关答案

【问题标题】：CORS AWS API-Gateway with Authentication Angular2具有身份验证 Angular2 的 CORS AWS API 网关
【发布时间】：2017-09-25 02:19:13
【问题描述】：

我的 AWS API-Gateway 配置为 Lambda 代理。在 Lambda 中，我添加了以下标头：

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key'

首先，everythink 可以正常工作。现在我用 CognitoUserPool 添加了一个 Authorizer，我得到以下错误：

XMLHttpRequest cannot load https://xxx.eu-west-1.amazonaws.com/xxx/xxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.

我认为问题在于，使用身份验证不会调用我的 Lambda 函数，因此没有设置任何标头。我使用 Angular2 应用程序调用端点

const headers = new Headers();
headers.append('Authorization', 'authtoken');
http.get('address...', headers);

但是由于我认为的任何 CORS 原因，标头没有设置/附加到请求中。

有人知道我该如何解决这个问题吗？

P.S.：我尝试了 API-Gateway 的“启用 Cors”功能，但不起作用。

编辑：我在带有身份验证的网关中也有一个“OPTIONS”方法，它会响应上面的标头。

问候

【问题讨论】：

我知道这很简单，但我不得不问：您是否在启用 CORS 以反映这些更改后部署了您的 API？
是的，我确实部署了它。

标签： angular amazon-web-services cors aws-lambda

【解决方案1】：

您的 Lambda 代理函数是否映射到 ANY HTTP 方法类型？如果是这样，它可能正在尝试对飞行前 (OPTIONS) 请求执行身份验证。如果是这种情况，请尝试将您的代理功能具体映射到 POST、GET 等。

【讨论】：

不，它是专门映射到每个函数的。不是任何方法。

【解决方案2】：

我找到了问题的解决方案。它不是由 API-Gateway 引起的。问题是这段代码：

const headers = new Headers();
headers.append('Authorization', 'authtoken');
http.get('address...', headers);

“get”需要一个“RequestOptions”对象。它必须是：

const headers = new Headers();
headers.append('Authorization', 'authtoken');
const options = new RequestOptions({headers: headers});
http.get('address...', options);

【讨论】：