在 AWS Amplify 上部署 React Web 应用程序时出现 403 ACCESS DENIED 错误答案

【问题标题】：Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify在 AWS Amplify 上部署 React Web 应用程序时出现 403 ACCESS DENIED 错误
【发布时间】：2020-03-28 19:20:54
【问题描述】：

这几天一直在绞尽脑汁。我正在尝试在 AWS Amplify 上部署我的反应应用程序。当我启动应用程序时，我被正确定向到登录页面（使用 Auth0 通用登录）登录后，我通过回调 URL 被重定向回我的 Web 应用程序。

当我的页面加载时，我收到以下消息

此 XML 文件似乎没有任何与之关联的样式信息。文档树如下所示。

<Error>
<Code>AccessDenied</Code>

<Message>Access Denied</Message>

<RequestId>B2173BDEE0658858</RequestId>

<HostId>
TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
</HostId>
</Error>

我没有通过 s3 存储桶托管 Web 应用程序，而是将构建文件直接上传到 AWS Amplify。

对问题所在有什么想法吗？

【问题讨论】：

嘿，你解决了吗？同样的问题。
这里有同样的问题。 index.html 的 SPA 并希望添加一个额外的纯 HTML 登录页面来跟踪活动。我在公共根目录中尝试了一个单独的 xyz.html，并在子文件夹 public/xyz/index.html 中尝试了一个 index.html。两者都收到与上述相同的响应... 403 权限被拒绝和与上述相同的 XML 错误。
发现了我的问题，我认为 webpack 在构建过程中复制了 *.html，但事实并非如此。在我将新的 .html 文件添加到 webpack.config 并修复了我的重写后，它起作用了。

标签： reactjs amazon-web-services aws-amplify

【解决方案1】：

Use this rule on amplify console.
[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

【讨论】：

我也有这个问题。
这确实有效，谁能解释为什么会这样？明明是添加一些外部资源（css、givs等），为什么不被一般的“/”规则抓到呢？
部署单页应用时需要此方案。当请求进入新部署的服务器上的资源时，需要将它们重定向到根 html 文件，因为这是您的应用程序逻辑所在的位置。因此，您只需要以支持您的应用程序的方式配置 AWS。查看 Using Redirects 以了解重定向如何适用于 AWS，然后查看 section on SPAs
有没有办法在代码中添加重定向规则并推送到 git repo？我宁愿不使用 Amplify 控制台。顺便说一句，感谢您的回答。 @马立果

【解决方案2】：

创建 zip 文件夹时，请确保压缩构建输出的内容，而不是顶级文件夹。例如，如果您的构建输出生成一个名为“build”或“public”的文件夹，首先导航到该文件夹，选择所有内容，然后从那里压缩。如果您不这样做，您将看到“拒绝访问”错误，因为该站点的根目录将无法正确初始化。

  <Error>
      <Code>AccessDenied</Code>
      <Message>Access Denied</Message>
      <RequestId>4442587FB7D0A2F9</RequestId>
      <HostId>...</HostId>
 </Error>

https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html

【讨论】：