具有Angular

时间：2015-10-02 01:57:30

标签： angularjs amazon-web-services cors aws-api-gateway

有没有人让AWS API Gateway与Angular.js前端一起使用？我有一个lambda函数，它通过API网关中的POST方法公开。我按照此文档的说明设置了标题：http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

我在Postman中进行过测试，效果很好。我没有做任何特别的事情，但是当我进行$http.post()调用时，我只在请求的资源上出现No 'Access-Control-Allow-Origin'标头。因此，不允许原点http://localhost:9000访问。回复的响应为HTTP status code 500.。

5 个答案:

答案 0 :(得分：8)

Api Gateway团队。

希望现在您已经在控制台中检查了新的“启用CORS”功能。即使您的开发人员工作流程在控制台之外，您也可以快速设置测试API并查看控制台为您设置的标头配置，然后将其复制到您的Swagger def或您提出的任何解决方案。

在任何一种情况下，文档指南仍然适用。您将需要3个标头：Access-Control-Allow-Methods，Access-Control-Allow-Origin和Access-Control-Allow-Headers。这些值取决于您的API。

如果您想向我发送您尝试调用的API资源，我可以从我们这边看看。

答案 1 :(得分：6)

我目前通过API Gateway和Lambda运行POST功能，可以从带有CORS的Angular客户端访问。虽然我不知道你的配置是什么，但我可以分享我所有的相关设置，希望你找到错过的东西。目前启用CORS是一件非常痛苦的事情（并且希望亚马逊正在努力解决这个问题）需要在很多领域进行大量的小步骤而且文档相当差。

我的资源有两种方法（OPTIONS和POST），我将分享每种方法的相关设置：

发表：
方法要求：没什么特别的。对于我的端点，我在一个路由参数的请求路径下有一个选项。我没有使用查询字符串，因此URL Query String为空。 HTTP请求标头也是空的。

整合请求：
集成类型：Lambda 映射模板：我有一个（application / json），带有一个模板，用于从请求体传递适当的值，并将参数路由到我的lambda函数。

方法响应：
展开200状态代码字段。添加标题为＆＃34; Access-Control-Allow-Origin＆＃34;然后单击复选标记按钮以保存它。您可能必须为您可能拥有的任何其他状态代码执行此操作。

整合响应：
展开200响应状态字段。在标题映射下，修改映射值以包含＆＃39; *＆＃39;。单引号是必需的。您可能必须为您可能拥有的任何其他集成响应执行此操作。

选项：
方法要求：
没什么特别的，就像POST方法一样。

整合请求：
我把它设置为模拟集成。根据亚马逊的说法，这并不重要，所以我只是将其设置为模拟，因为我们真正需要做的就是用适当的标题回复200。没有映射模板。

方法响应：
展开200状态代码字段。添加以下3个响应标头并使用复选框保存它们：访问控制允许标头，访问控制 - 允许 - 方法，访问控制 - 允许-来源即可。没有其他状态代码。

整合响应：
展开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值。

答案 2 :(得分：1)

  

TLDR；这不是CORS问题，问题来自API网关，请检查   API网关上的API处理程序上出现问题。确保您的API可以   在您的UI项目中使用Postman之前，先与Postman合作。

您可以遵循此准则how to 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的工作方式：

enter image description here

正如您在此处看到的那样，在将实际请求发送到API网关之前，浏览器已将OPTIONS请求发送到API网关，以确保允许您的请求发送到API网关。如果OPTIONS请求返回200，那么您的实际请求将发送到API网关。

  1. 如果您的OPTIONS请求失败。这样就无法将您的请求发送到API网关。在开发人员工具中，您会看到类似No 'Access-Control-Allow-Origin' is present on the requested resource...的内容，但是没有更多错误消息。该请求的返回状态为0->您必须配置CORS。

  2. 另一种情况与您对问题的解释相同。得到了HTTP Status Code 500，还有关于CORS的信息。这不是CORS问题，我认为是浏览器问题。在这种情况下，OPTIONS的请求返回状态码为200。您的实际请求返回状态码为500，这意味着您的API已损坏。浏览器仍然发送No 'Access-Control-Allow-Origin' is present on the requested resource...错误。在这种情况下，您必须调试API才能看到问题。

希望有帮助！

答案 3 :(得分：0)

由于您的错误显示＆＃34;否＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。＆＃34;听起来好像当你试图从Angular调用API时，它没有获得你在遵循亚马逊文档时设置的Access-Control-Allow-Origin标头。

首先，我会仔细检查您是否正在为API调用正确的网址。亚马逊在舞台屏幕中显示此内容，但您必须将舞台名称附加到他们向您显示的URL。所以，如果你部署到＆＃34; prod＆＃34;舞台，他们显示

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响应添加了这些标头。

作为最后一个结果，您可以尝试使用＆＃34;启用CORS＆＃34;亚马逊最近添加的按钮。在左侧树视图中选择您的资源，然后查找＆＃34;启用CORS＆＃34;右上角的按钮。单击该按钮，AWS将重新创建所有与CORS相关的方法。

我希望其中一些步骤有所帮助！

答案 4 :(得分：0)

您可以启用CORS＆＃39; AWS API Gateway的功能。登录您的AWS账户并导航至API Gateway。在“资源”下选择一个资源，然后从操作下拉菜单中选择“启用CORS”。这将为资源上的所有方法启用CORS。请查看以下链接了解详情

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

相关问题
最新问题