来自 AWS Amplify 上托管的反应应用程序的受保护路由的访问被拒绝错误答案

【问题标题】：Access Denied Error from protected routes from react app hosted on AWS Amplify来自 AWS Amplify 上托管的反应应用程序的受保护路由的访问被拒绝错误
【发布时间】：2020-08-23 11:49:02
【问题描述】：

我在 AWS Amplify 上托管了我的 react 应用程序。在尝试访问应用程序的受保护路由时，我在屏幕上收到以下错误此 XML 文件似乎没有任何与之关联的样式信息。文档树如下所示。

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3C8377104116CA48</RequestId>
<HostId>nL3bDs+kXEWE8uBFPTLkFLpRg6CCmKfejftWs5wmTWYO6K6WDzpwsDXJCFTK0EFhjJdaHECfuos=</HostId>
</Error>

我该如何解决这个问题？

【问题讨论】：

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

【解决方案1】：

我自己从一个 AWS 论坛中找到了一个解决方案，一位用户很乐意分享他从 AWS 支持部门获得的解决方案。我猜 AWS 不希望全世界知道它所造成的问题的解决方案，以便出售支持包。无论如何，这是解决方案：

在“重写和重定向”部分的 AWS Amplify 控制台中添加此记录

Source Address: </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
Target: /index.html
Type: 200 (Rewrite)

就是这样。它神奇地得到解决。我不知道为什么必须这样做或首先出了什么问题，但采取此操作可以解决问题。

【讨论】：

我使用 NodeJS 作为 API，它不是 REACT。当我尝试上述方法并输入 target = /index.js 时，它显示 index.js 的源代码，即使我在我的 URL 上转到 /api/books 也是如此。
成功了。谢谢兄弟。

【解决方案2】：

Vinit Khandelwal 的答案是正确的，但如果有人正在寻找有关此问题的文档，这里就是。这是在 Amplify 控制台中添加的简单配置。像魅力一样工作！

https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

【讨论】：

【解决方案3】：

当您通过放大控制台创建项目时，它会自动创建重写规则。当您从 CLI 创建项目时，它不会创建重写规则。

您可以将 Amplify 在从控制台创建的项目上使用的重写规则复制到您的项目的重写规则中。

我在下面包含了重写规则。

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

【讨论】：