React App 保护路由抛出拒绝访问错误 - 托管在 AWS Amplify 上

【问题标题】：React App protected routes throw Access denied error - hosted on AWS AmplifyReact App 保护路由抛出拒绝访问错误 - 托管在 AWS Amplify 上
【发布时间】：2020-12-08 03:17:49
【问题描述】：

我在 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 Amplify 应用程序具有特殊配置。检查

AWS Amplify 控制台 > 应用程序设置 > 重写和重定向

配置重写规则为我解决了这个问题。我的规则如下所示：来源 -

</^[^.]+$|\.(?!(css|yaml|gif|ico|jpg|js|png|txt|svg|woff2|woff|ttf|map|json)$)([^.]+$)/>

目标-

/index.html

类型-

200 (Rewrite)

详细说明在这里-https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html

【讨论】：