开发者问题收集

AWS Amplify ReactJS 应用程序无法重新加载页面

2021-07-08
3429
reactjs amazon-web-services aws-amplify

我目前正在开发一个主要使用 ReactJS 和 AWS Amplify 的全栈项目。我已经成功部署了网站，但 URL 路由似乎只有在从主页重定向时才有效。我只能加载主页 www.website.com ，但我尝试手动输入 www.website.com/login/ ，它给了我这个消息 

<Error>
  <Code>AccessDenied</Code>

  <Message>Access Denied</Message>

  <RequestId>B2173BDEE0658858</RequestId>

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

我从其他 StackOverflow 页面查找解决方案，但似乎并没有解决问题。

我尝试在提供的 AWS 控制台中添加重定向规则（ 在 AWS 上部署 React Web 应用程序时出现 403 ACCESS DENIED 错误Amplify ），但问题仍然存在。有办法解决这个问题吗？

2个回答

您必须在 AWS Amplify 上设置 404（页面未找到）重定向​​以指向 index.html。

React App 是 SPA（单页应用程序），它有自己的路由，在 AWS 端，除基本路径之外的所有其他路由都将返回 404，因为它们在服务器端不存在。

一旦您再次设置 404 以指向您的 React 应用程序，React 路由器将处理路由。

检查：docs.aws.amazon.com/amplify/latest/userguide/redirects.html 并注意 404 重定向。

在此处输入图像描述

TariqN
2021-07-08

如果您在 2024 年仍然遇到 Amplify 的这个问题，这是对我唯一有效的解决方案：

  1. 在 Amplify 控制台 > 托管 > 重写和重定向
  2. 添加此规则

原始地址
</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

目标地址 /index.html

重定向类型 200

giovani07
2024-07-03