从反应应用程序调用 AWS lambda答案

【问题标题】：Invoke AWS lambda from react application从反应应用程序调用 AWS lambda
【发布时间】：2019-10-23 12:15:50
【问题描述】：

我已经开发了一个带有 .net 核心的 AWS 函数，它已部署到 AWS，我可以从 Postman 调用它，看起来一切正常，但是当我尝试从带有 Axios 库的反应应用程序调用它时，我收到了这个错误：

(index):1 从源 'http://localhost:3001' 访问 XMLHttpRequest 在 'https://awsfunctionurl/api/Organisations' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态.

这里是调用 API 的代码：

const response: Response = await axios.get(url,{
      headers:{
        "content-type": "application/json; charset=utf-8",
        "Authorization": `Bearer ${accesToken}`
      },
    })

当我删除授权标头时，它开始工作！

【问题讨论】：

据我所知，CORS 是由浏览器引起的。
更好地查看你的 lambda/api 网关的 CORS 设置，邮递员似乎并没有强制执行它们，而运行 react 的浏览器当然会执行
是因为我在本地机器上运行这个应用程序吗？所以如果我在某个地方发布它应该可以工作吗？

标签： reactjs amazon-web-services aws-lambda axios

【解决方案1】：

如果您从本地浏览器运行请求，默认情况下它将阻止飞行前请求。有一些解决方法，具体取决于浏览器。 See here, for example, for Chrome。

或者，在 lambda 函数本身的响应标头中添加 '"Access-Control-Allow-Origin": "*"' 可能更容易。

【讨论】：

PS："Access-Control-Allow-Origin": "*" 请允许所有客户端（来源）请求您的 lambda。在生产中设置时要小心，您需要指定源域，如 so.com 或 urAwesomeSite.org