无法使用 API 密钥和 COR 查询 AWS API Gateway

Question

我几乎完成了一个新的 Web 应用程序，但是由于 COR 问题，我从 AWS 的 API 网关收到 403 错误。

我正在创建一个 Vue 应用程序并使用 Vue 的 axios 库。 CORs 已启用，并且通过发送以下内容在 AWS 的 API 网关中关闭了 API Key Required 选项的请求：

    axios
      .get('My-URL-Endpoint',{headers: {})
      .then(response => (this.passports = response.data ));

当我在 AWS 的 API 网关中打开 API Key Required 功能时。当我使用 Postman 并包含 x-api-key: My-API-Key 时，它可以工作。但是，使用Vue的axios却不行，返回错误403：

    axios
      .get('My-URL-Endpoint', {headers: { 
        'x-api-key': 'My-API-Key'
      }})
      .then(response => (this.passports = response.data ));

我的第一直觉是问题与 Axios 如何通过浏览器发送请求有关。据我所知，飞行前检查似乎失败了，因为我在浏览器中收到以下错误：

CORS 策略已阻止从源“http://localhost:8080”访问“My-URL”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：没有“访问控制” -Allow-Origin' 标头出现在请求的资源上。

果然，响应中似乎没有 access-control-allow-origin 键。于是我在 403 消息的响应中添加了 access-control-allow-origin 并得到了一个新的错误“它没有 HTTP ok 状态”

我一直在尝试几乎所有方法来让它发挥作用！我遇到了stackoverflow answer，似乎有人建议 API Key Required Key 功能不能与 COR 一起使用。这种似乎不可能是真的。这将是一个非常严重的限制。

所以我的问题是如何让浏览器的飞行前检查与 AWS 的 API 网关内的 COR 和 API 密钥功能一起工作？

谢谢！

Answer 1

如果您在 api 网关上启用了 cors，接下来要查看的地方是应用程序代码，例如 lambda。确保 Lambda 在成功和失败情况下都返回正确的跨域标头。

首先，您可以从云观察日志中检查请求是否到达 lambda。另一种检查方法是将 Api 网关目标临时指向 Mock 端点。

如果模拟端点有效，那么问题在于应用程序代码。否则问题出在您的 api 网关端点。

另请注意，当您为方法/资源启用 cors 时，您使用的任何标头都应在 Access-Control-Allow-headers 部分中列出。