防止 AWS Amplify 添加尾随斜线和强制重定向

Question

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

当我在本地运行我的代码并尝试访问localhost:3000/foo/bar/id页面时呈现良好。当我通过AMPLIFY部署相同的代码和用户点击一个按钮与一个href，浏览器获得一个302和用户重定向到example.com/foo/bar/id/，然后因为这个页面不存在，则默认扩增出重定向它们发送到index.html一个404

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

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

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

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

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

Answer 1

Amplify 添加了尾部斜杠以防止出现类似的 url，/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这些文件是服务器端存在的唯一路由。有关更多信息，请查看有关 SPA 的尾随斜杠和重定向的文档。

这是关于如何在 aws 放大中进行此设置的图片：

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

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

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

原因是 webform 会转义反斜杠！

Answer 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
}]

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

您只需将“report”替换为您的网址部分即可。