防止 AWS Amplify 添加斜杠和强制重定向答案

【问题标题】：Prevent AWS Amplify From Adding Trailing Slash and Forcing Redirect防止 AWS Amplify 添加斜杠和强制重定向
【发布时间】：2020-01-21 17:45:55
【问题描述】：

我正在使用 AWS Amplify，但无法弄清楚如何配置我的重写和重定向或 routes.js 以防止尾部斜杠破坏我的功能。

当我在本地运行我的代码并尝试访问 localhost:3000/foo/bar/id 时，页面呈现正常。当我通过 amplify 部署相同的代码并且用户单击带有 href 的按钮时，浏览器会得到一个 302 并将用户重定向到 example.com/foo/bar/id/，然后由于此页面不存在，默认的 Amplify 重定向将它们发送到 @ 987654324@ 和404

我尝试将以下内容添加到我的反应路线中：

/foo/bar/:id
/foo/bar/:id/

以及 AWS Amplify 控制台中的以下重定向规则：

/foo/bar/<id>  | /foo/bar/<id> | 302
/foo/bar/<id>/ | /foo/bar/<id> | 302

但没有任何效果。我在这里失去了理智，有什么建议吗？

【问题讨论】：

标签： reactjs react-router aws-amplify

【解决方案1】：

Amplify 在尾部添加斜杠以防止出现 /about.html 之类的网址，但这可能不是真正的原因。您的应用程序/浏览器正在使用服务器端不存在的路由向服务器发出请求（您使用的是严格客户端的 SPA 路由）。尝试在 amplify js 控制台中添加以下重定向规则（在 App Settings: Redirects and rewrites > Edit > Open Text Editor）：

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

这会将所有文件重写为/index.html，这是服务器端存在的唯一路由。有关更多信息，请查看 Trailing Slashes 和 Redirects for SPAs 上的文档。

这是一张关于如何在 aws amplify 中进行此设置的图片：

我们最好在提供的文本编辑器中复制 JSON 对象。

否则，如果您要使用网络表单，请注意您必须输入此字符串作为来源：

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

原因是 webform 会转义反斜杠！

【讨论】：

这真的很有帮助。我将在您的答案中添加图片以进行澄清。我遵循了解决方案，它解决了我的问题。
感谢这对我有用并解决了我的问题。每当我在手机上加载我在 Chrome/Firefox 中开发的网站时，关闭应用程序并重新打开它会重新加载最后一个网站，Amplify 会给我一个 AccessDenied 错误...

【解决方案2】：

我在 Amplify 上的 Next.js 网站也遇到了同样的问题。经过几个小时的测试，我找到了以下解决方案：

[{
    "source": "/report/<slug>/",
    "target": "/report/<slug>",
    "status": "200",
    "condition": null
},
{
    "source": "/report/<slug>",
    "target": "/report/<slug>.html",
    "status": "200",
    "condition": null
}]

将此添加到您的重定向中，然后它应该可以工作。

您只需将“报告”替换为您的 url 部分。

【讨论】：

【解决方案3】：

在“重写和重定向”部分添加以下内容也对我有用。尾部斜线现在可以使用了。

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

【讨论】：