有人成功将AWS API Gateway与Angular.js前端配合使用吗？我有一个通过API Gateway以POST方法公开的lambda函数。我按照这个文档中指示的设置了标头：http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html。我在Postman中测试它，效果很好。我没有做任何特殊处理，但当我进行$http.post()调用时，我只得到“No 'Access-Control-Allow-Origin'”标头不存在于请求的资源上。因此，不允许访问来源为“http://localhost:9000”的响应。响应的HTTP状态代码为500。
AWS API Gateway与Angular的结合
8
- dudemonkey
9
你的终端点URL是什么？如果不是本地主机，由于CORS（https://en.wikipedia.org/wiki/Cross-origin_resource_sharing）限制，您将无法发出请求。您必须代理您的请求，或从与目标相同的URL请求。 - show-me-the-code
API网关中Access-Control-Allow-Origin的值是什么（包括post和options）？ - Luc
3“*”，就像我链接的文档中一样。对于OPTIONS和POST方法，情况也是一样的。 - dudemonkey
还没有。希望我能去AWS阁楼问问专家，如果有答案的话，我会在这里发布解决方案。 - dudemonkey
@dudemonkey 你在 AWS 论坛上发过帖子吗？ - Eric Francis
显示剩余4条评论
5个回答
8
这里是Api Gateway团队。
希望你已经在控制台中查看了新的“启用CORS”功能。即使您的开发工作流程不在控制台中，您也可以快速设置一个测试API，并查看控制台为您设置的标头配置，然后将它们复制到Swagger def或您想出的任何解决方案中。
文档指南仍然适用于任一情况。您将需要3个标头：Access-Control-Allow-Methods、Access-Control-Allow-Origin和Access-Control-Allow-Headers。这些的值将取决于您的API。
如果您想向我发送您正在尝试调用的API资源，我可以从我们这边查看。
- jackko
3
2我刚刚花了一个小时试图弄清楚为什么你的文档不起作用，实际上并不是你的文档的问题，而是我没有在之后部署API。你能否考虑将以下内容放入你的文档中：
http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html - turiyag
1该死的，谢谢伙计！我已经在这上面忙了几个小时了...结果发现我必须部署API。奇怪的是，在进行其他更改时我不必这样做！ :/ - rex
哈哈。很有趣 - 但是最近我已经帮助解决了那个确切的问题好几次了。我们仍然必须记得部署代码 :) - Dave Maple
7
我目前已经通过API Gateway和Lambda实现了一个POST函数，可以通过CORS从Angular客户端访问。虽然我不知道你的配置是什么，但我可以分享所有相关设置，希望你能找到遗漏的地方。启用CORS目前非常麻烦（希望亚马逊能够解决），需要在很多区域进行许多小步骤，文档也相当贫乏。
我的资源有2种方法（OPTIONS和POST），我将分享每个方法的相关设置：
POST: 方法请求：没有特殊要求。在我的终端节点中，我在请求路径下有一个路由参数选项。我没有使用查询字符串，因此URL查询字符串为空。HTTP请求头也为空。
集成请求： 集成类型：Lambda 映射模板：我有一个（application / json）具有将适当的值从请求正文和路由参数传递给我的lambda函数的模板。
方法响应： 展开200状态代码字段。添加一个标题“Access-Control-Allow-Origin”，并单击复选标记按钮以保存它。您可能还需要为其他状态代码执行此操作。
集成响应： 展开200响应状态字段。在标题映射下，修改映射值以包含'*'。需要单引号。您可能还需要为其他集成响应执行此操作。
OPTIONS: 方法请求： 没有特殊要求，就像POST方法一样。
集成请求： 我将其设置为模拟集成。根据亚马逊的说法，这并不重要，因此我将其设置为模拟，因为我们真正需要做的就是使用适当的标头响应200。没有映射模板。
方法响应： 展开200状态代码字段。添加以下3个响应标头，并使用复选框保存它们：Access-Control-Allow-Headers，Access-Control-Allow-Methods，Access-Control-Allow-Origin。没有其他状态代码存在。
集成响应： 展开200响应状态字段。正则表达式为空（设置为默认值），而此方法仅具有200个响应。展开标题映射，并将标题设置为以下映射值：
我的资源有2种方法（OPTIONS和POST），我将分享每个方法的相关设置：
POST: 方法请求：没有特殊要求。在我的终端节点中，我在请求路径下有一个路由参数选项。我没有使用查询字符串，因此URL查询字符串为空。HTTP请求头也为空。
集成请求： 集成类型：Lambda 映射模板：我有一个（application / json）具有将适当的值从请求正文和路由参数传递给我的lambda函数的模板。
方法响应： 展开200状态代码字段。添加一个标题“Access-Control-Allow-Origin”，并单击复选标记按钮以保存它。您可能还需要为其他状态代码执行此操作。
集成响应： 展开200响应状态字段。在标题映射下，修改映射值以包含'*'。需要单引号。您可能还需要为其他集成响应执行此操作。
OPTIONS: 方法请求： 没有特殊要求，就像POST方法一样。
集成请求： 我将其设置为模拟集成。根据亚马逊的说法，这并不重要，因此我将其设置为模拟，因为我们真正需要做的就是使用适当的标头响应200。没有映射模板。
方法响应： 展开200状态代码字段。添加以下3个响应标头，并使用复选框保存它们：Access-Control-Allow-Headers，Access-Control-Allow-Methods，Access-Control-Allow-Origin。没有其他状态代码存在。
集成响应： 展开200响应状态字段。正则表达式为空（设置为默认值），而此方法仅具有200个响应。展开标题映射，并将标题设置为以下映射值：
Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Requested-With'
Access-Control-Allow-Methods: 'GET,POST,OPTIONS'
Access-Control-Allow-Origin: '*'
没有映射模板。
然后部署您的API。希望现在可以允许CORS请求。我遇到了与您相同的问题，我相当确定问题是缺少Access-Control-Allow-Headers中的X-Requested-With值。
- Akshay Dhalwala
3
这个答案非常完美。控制台中的“启用CORS”按钮正在覆盖当前保存的所有内容。我已经向支持部门提交了一张工单，但在此之前，这个方法是有效的。 - Chalise
如果您制作了这个视频教程，我将会给您20美元的比特币。 - Mike
@Akshay Dhalwala，通过您的更改，我已经能够解决CORS问题，但现在出现了401-未经授权的错误。API网关服务与AWS Cognito服务集成，我已启用“GET”方法的授权。我还添加了X-Requested-With选项到“Access-Control-Allow-Headers”中，并重新部署了它。请告诉我如何解决401问题。 - Avinash
2
TLDR; 这不是CORS问题，问题来自API网关，请检查API网关上的API处理程序问题。在将其用于UI项目之前，请确保您的API可以在Postman中使用。
您可以按照此指南 如何处理CORS。但看起来您已经执行了此操作。
让我们先谈谈CORS：这是一种机制，帮助您保护客户在使用您的Web应用程序时，允许您配置响应头，以便：
您可以按照此指南 如何处理CORS。但看起来您已经执行了此操作。
让我们先谈谈CORS：这是一种机制，帮助您保护客户在使用您的Web应用程序时，允许您配置响应头，以便：
- 其他主机可以访问您的 Web 应用程序的资源。例如：
Access-Control-Allow-Origin: abc.com，当您返回带有此标头的响应时。这将允许来自主机abc.com的请求。 - 限制对特定 HTTP 方法的访问。例如：
Access-Control-Allow-Methods: GET, PUT，仅允许源访问具有方法GET或PUT的资源，不允许POST、DELETE或任何其他方法。 - 仅允许具有与您定义的列表匹配的标头的请求。
Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token，Amazon 定义了其中一些标头，实际上您可以指定自己的标头。
您应该考虑设置这些属性的值。在我看来，当您正在开发时只需使用 * (Access-Control-Allow-Origin: *)，并在发布 API 时将值更改为特定域或通配符 (Access-Control-Allow-Origin: *.abc.com)。
以下是 CORS 的工作原理：
- 如果OPTIONS请求失败，则无法将您的请求发送到API网关。在开发人员工具中，您将看到类似于“未在请求的资源上找到'Access-Control-Allow-Origin'...”但没有更多错误消息。请求将返回状态为0->您必须配置CORS。
- 另一种情况与您在问题中解释的情况相同。得到HTTP状态代码500，还涉及CORS。我认为这不是CORS问题，而是浏览器问题。在这种情况下，OPTIONS请求返回状态代码200。您的实际请求返回状态代码500，这意味着您的API已经出现故障。浏览器仍会发送“未在请求的资源上找到'Access-Control-Allow-Origin'...”错误。在这种情况下，您必须调试您的API以查看问题所在。
- Toan Quoc Ho
1
您可以从AWS API Gateway启用“Enable CORS”功能。 登录您的AWS帐户并导航到API Gateway。 在“资源”下选择资源，然后从操作下拉菜单中选择启用CORS。 这将为资源上的所有方法启用CORS。 请查看下面的链接以了解详细信息。
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html
- Sanjeev Chauhan
0
由于您的错误显示“请求资源中缺少'Access-Control-Allow-Origin'标头。”，这表明当您尝试从Angular调用API时，它没有获取在遵循Amazon文档时设置的Access-Control-Allow-Origin标头。
首先，请确保您正在调用API的正确URL。 Amazon在阶段屏幕上显示此内容，但您必须将阶段名称附加到他们向您显示的URL上。因此，如果您部署到“prod”阶段并且他们显示
https://xyz.execute-api.us-west-2.amazonaws.com/my-api
你需要调用
。
https://xyz.execute-api.us-west-2.amazonaws.com/my-api/prod
接下来，我将尝试在Postman中调用API的OPTIONS方法。将POST方法更改为OPTIONS并调用API后，请检查Postman结果部分中的标头。您想在其中看到以下内容：
Access-Control-Allow-Methods → POST,OPTIONS
Access-Control-Allow-Origin → *
如果您无法在响应中看到它们，请仔细检查 API 下 OPTIONS 方法下的方法响应。确保这些标头已添加到 200 响应中。
作为最后的结果，您可以尝试使用亚马逊最近添加的“启用 CORS”按钮。在左侧树形视图中选择您的资源，然后查找右上角的“启用 CORS”按钮。单击该按钮，AWS 将重新创建所有与 CORS 相关的方法。
希望这些步骤中的一些能够帮助您！
- kennbrodhagen
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接