当我在 AWS Amplify 上重新加载我的 React 应用程序时出现“访问被拒绝”错误

Question

我正在开发一个在 AWS Amplify 上运行的 React 应用程序。 我的 React 应用程序使用 react-router-dom 库来路由到不同的组件。 在 CLI 中运行 amplify publish 后，在应用程序 (obktraining.com) 的根目录下，浏览器中的一切都很好，我也可以路由到应用程序中的其他组件也很好。 但是，当我在路线 (obktraining.com/menu) 上刷新浏览器时，我收到一条访问被拒绝的错误消息。

我发现了其他关于在 Amplify 中重写和重定向的类似问题的帖子，但给出的解决方案对我不起作用。

这是错误的图像：

我的 Amplify 应用重写和重定向：

同样，该错误仅在我刷新路线（obktraining.com/menu 或 obktraining.com/drinks）而不是 obktraining.com 时显示。 问题是由 react-router-dom 库引起的还是 Amplify 设置的问题？ 我不知道从这里去哪里。

Answer 1

几天以来我一直面临同样的错误。错误是由放大设置引起的。 解决方案很简单，通过添加新规则来编辑您的重写和重定向。

源地址 = </^[^.]+$|.(?.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+ $)/>

目标地址 = /index.html

状态 = 200（重写）

国家代码可以留空

保存并再次尝试刷新您的应用。 它应该可以工作。

使用此作为参考： https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

Answer 2

您可以从 AWS Amplify 控制台导航到您的应用程序中的“重写和重定向”，然后单击编辑和 select 打开文本编辑器，并将这段代码添加到您的数组（如果存在）中，否则将数组大括号放在它周围。

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

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

Answer 3

然后你就可以输入（如 Dhruv Godambe 上面发布的）

</^((?..(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

作为源地址和

/index.html 作为您的目标地址

Answer 4

正确的规则应该是这样的：

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200

Answer 5

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

---

我遇到了同样的问题。
我正在使用手动 Zip 文件（压缩）下载。

以下是手动部署的方法：

1. 运行此命令

npm run build

现在将创建一个构建文件夹。

2.压缩这个文件夹的内容
不是整个项目的内容。
您将目录更改为构建文件夹并压缩其中的内容。

3. 将压缩文件上传到构建目录中现在这应该可以正常工作了。
:)

Answer 6

我遇到了同样的问题。 我正在压缩构建文件夹。

这是我如何修复它的：

运行构建命令

npm run build

现在将在您的项目目录中创建一个构建文件夹。

打开构建文件夹。

压缩构建文件夹的内容而不是构建文件夹。

现在上传这个从构建文件夹的子文件和文件夹创建的新 zip。

应用程序将在 aws amplify 上运行良好。

Answer 7

我也收到了 Access Denied 错误消息。 当我按照上面答案中描述的文档操作时，错误消失了，但后来我也遇到了上面描述的白屏问题。

查看这些步骤，我注意到“重写和重定向”设置中列出的“目标地址”的自动完成是/ 。 当我尝试使用/作为“目标地址”而不是/index.html时，我不再出现白屏并获得了预期的页面内容。

分享我发现的内容，以防其他人在使用上述答案中描述的重写规则修复错误后看到白屏。 （请注意，自 2022 年 11 月起，“重写和重定向”设置页面使用的措辞是“目标地址”而不是“目标地址”。）

Answer 8

我遇到了同样的错误，我先压缩了 build 文件夹然后上传它并得到了那个错误，但是当我上传文件夹而不压缩它时，它工作正常！ 诡异的！！