Question

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

当我在本地运行代码并尝试访问localhost:3000/foo/bar/id时，页面呈现良好。当我通过放大部署相同的代码，并且用户单击带有href的按钮时，浏览器将获得一个302并将用户重定向到example.com/foo/bar/id/，然后由于该页面不存在，因此默认的Amplify重定向使用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添加一个尾部斜杠以防止类似L = {1: (13600, 14797), 2: (14700, 14700), 3: (14700, 10400), 4: (14600, 17200), 5: (13600, 14797), 6: (14600, 17200), 7: (14700, 10400), 8: (14700, 10400), 9: (12800, 14770)} vals = [ v for v in L.values()] counts = [] for i in vals: counts.append((i, vals.count(i))) set(counts)的网址，但这可能不是真正的原因。您的应用/浏览器正在使用服务器端不存在的路由向服务器发出请求（您使用的是严格位于客户端的SPA路由）。尝试在amplify js控制台中添加以下重定向规则（在“应用程序设置”下：“重定向和重写”>“编辑”>“打开文本编辑器”）：

/about.html

这会将所有文件重写为[ { "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>", "target": "/", "status": "200", "condition": null } ]，这是服务器端存在的唯一路由。有关更多信息，请签出Trailing Slashes和Redirects for SPAs上的文档。

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

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

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

防止AWS Amplify添加结尾斜杠和强制重定向

2 个答案: