托管在 AWS S3 API 请求上的 React 应用程序失败答案

【问题标题】：React app hosted on AWS S3 API requests fail托管在 AWS S3 API 请求上的 React 应用程序失败
【发布时间】：2019-12-20 04:36:49
【问题描述】：

我正在使用create-react-app 编写一个（单页）react 应用程序，它调用我的 API，即 AWS api 网关和 AWS lambda。我正在尝试使用 AWS s3 静态托管来托管 react 应用程序。

在本地开发时，由于缺少 CORS 标头，对我的 API 的请求（使用 axios）被阻止。为了解决这个问题，我在 package.json 文件中向我的 AWS api 网关域添加了一个代理：

"proxy": "https://***.execute-api.us-east-2.amazonaws.com/"

所以请求在我的本地主机上工作，应用程序托管在节点开发服务器上。但是当应用程序托管在 AWS S3 上时，我无法让它工作。对我的 API 的 axios 请求总是失败并出现 403 Access denied 错误。

我的问题是，为什么请求会失败，我该怎么做才能解决这个问题？

编辑：我能够让我的 API 方法之一工作，方法是 1）在 API 网关中为有问题的方法启用 CORS 并让我的 API 返回标头：

{
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*'
}

使用方法响应。

现在，即使进行了上述更改，我的一种 POST 方法也根本不起作用，我收到 405“方法不允许”响应。我真的不知道我是否走在正确的轨道上。

【问题讨论】：

【解决方案1】：

【讨论】：

【解决方案2】：

如果您接收到的方法不允许，您尝试通过不正确的 http 方法而不是配置的方法访问。例如，您已配置“POST”，但尝试通过“GET”访问

【讨论】：

我的 API 网关配置为允许“任何”方法并将其转发给 lambda 函数以区分该方法。支持 GET 和 POST。同样，当请求通过节点服务器代理时，这一切都有效。
请求是否根据日志到达lambda
不，这不是。但该应用程序也在对同样有效的方法执行 GET。
尝试明确指定所有方法而不是*
我终于让一切正常了。我通读了启用 cors 文档的 API 网关并更新了我的 lambda 以处理 OPTIONS 方法并返回带有 CORS 标头的 200 响应。我所有的 API 调用现在都可以正常工作了。抱歉，这个问题变得如此混乱，谢谢您的帮助。

【解决方案3】：

您需要在AWS IAM中配置用户应用。
如果部署后不配置用户，你的应用请求会因为权限问题而失败。

【讨论】：