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

【问题标题】：Getting an "Access Denied" error when I reload my React app on AWS Amplify当我在 AWS Amplify 上重新加载我的 React 应用程序时出现“拒绝访问”错误
【发布时间】：2020-07-22 02:43:39
【问题描述】：

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

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

这是错误的图片：

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

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

【问题讨论】：

@justing 你能用下面提供的解决方案解决这个问题吗？因为我有同样的问题，但是当我尝试下面的解决方案时，我无法访问我的登录页面。它似乎是一个空白屏幕。
@AzherAleem 尝试使用</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/> 而不是</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>。它应该可以正常工作。参考：docs.aws.amazon.com/amplify/latest/userguide/…
@UsamaTahir，谢谢，我能够解决这个问题并将我的解决方案添加为下面的答案。

标签： reactjs amazon-web-services

【解决方案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

【讨论】：

这很好用，谢谢！你能解释为什么这有效吗？我阅读了参考资料，但我仍然不完全理解这里发生了什么。
这对我也有用！记得不要把/放在提供的源地址前面，否则不起作用。

【解决方案2】：

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

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

作为源地址和

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

【讨论】：

【解决方案3】：

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

{
        "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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

我也遇到过同样的问题。
我使用的是手动 Zip 文件（压缩）下载（错误）。

以下是正确手动部署的方法：

运行此命令

npm run build

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

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

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

【讨论】：