具有Angular的AWS API网关

4 回答

• 4

  Api Gateway团队在这里 .

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

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

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

  回复于 2024-05-06T21:23:50+08:00
• 0

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

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

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

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

  方法响应：
  展开200状态代码字段 . 为"Access-Control-Allow-Origin"添加 Headers ，然后单击复选标记按钮进行保存 . 您可能必须为您可能拥有的任何其他状态代码执行此操作 .

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

  OPTIONS:
  方法要求：
  没什么特别的，就像POST方法一样 .

  整合请求：
  我把它设置为模拟集成 . 根据亚马逊的说法，没关系，所以我只是将其设置为模拟，因为我们真正需要做的就是用适当的 Headers 回复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值 .

  回复于 2024-05-06T21:23:50+08:00
• 7

  由于您的错误在请求的资源上显示“No'Access-Control-Allow-Origin'标头 . ”听起来好像当你试图从Angular调用API时，它没有得到你遵循亚马逊文档时设置的Access-Control-Allow-Origin标头 .

  首先，我会仔细检查您是否正在为API调用正确的URL . 亚马逊在舞台屏幕中显示此内容，但您必须将舞台名称附加到他们向您显示的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
  

  接下来，我会尝试从邮递员调用API上的OPTIONS方法 . 将POST方法更改为OPTIONS并调用API后，请检查Postman结果部分中的 Headers . 你想在那里看到以下内容：

  Access-Control-Allow-Methods → POST,OPTIONS
  Access-Control-Allow-Origin → *
  

  如果您无法在响应中看到这些，请仔细检查下面的方法响应API中的OPTIONS方法 . 确保为200响应添加了这些标头 .

  作为最后的结果，您可以尝试使用Amazon最近添加的“启用CORS”按钮 . 在左侧树视图中选择您的资源，然后在右上角查找“Enable CORS”按钮 . 单击该按钮，AWS将重新创建所有与CORS相关的方法 .

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

  回复于 2024-05-06T21:23:50+08:00
• 0

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

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

  回复于 2024-05-06T21:23:50+08:00