Amazon S3 重定向规则 - 保留查询参数
Amazon S3 Redirect Rule - Preserve Query Params
我注意到 Amazon S3 Redirect rule - GET data is missing 但在遵循已接受的答案后,我的查询参数仍然没有被保留。
我有一个使用 React 和 React Router 的网站,这意味着我有几个 URL 加载相同的 HTML 和 JS,然后 JS 确定要加载应用程序的哪一部分在 URL.
例如:
/foo、/bar、/baz 都应该加载 index.html,加载 bundle.js。然后 bundle.js 观察 URL 并路由到某些 React 组件(也在 bundle.js 中)。
然而,S3 中不存在 foo、bar 或 baz 文件,只有 index.html。我想要做的是当我收到 404 时,重定向到 /#!/{URL}(例如 /foo 重定向到 /#!/foo)。这适用于我的重定向规则(如下)。但是,我也想带上查询参数(例如 /foo?ping=pong 重定向到 /#!/foo?ping=pong)但是 /foo?ping=pong 只是重定向到 /#!/foo.
这是我的重定向规则:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>http</Protocol>
<HostName>www.mydomain.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
有什么办法可以实现这个目标吗?理想情况下,每次添加新页面时都不必在 S3/CloudFront 中进行更改?
问题是我在 CloudFront 中设置了源不转发查询字符串,所以当 S3 收到请求时,它会在没有查询参数的情况下正确重定向。您可以在 CloudFront > 行为 > 转发查询字符串中找到此设置。
如果您想获得清晰的网址,也可以查看 this trick。您需要设置云端分发,然后在分发的 "Error Pages" 部分更改 404 行为。这样你就可以再次 domain.com/foo/bar
链接 :)
CloudFront/S3 中的菜单和选项随时间变化很大。
这是 2021 年 12 月的解决方案。
步骤 1) 在 CloudFront 中创建允许 QueryStrings 的“请求”策略
注意:您可能还想为 CORS 添加一些 Headers,例如 Origin
或 Access-Control-
...headers。
步骤 2) 转到您的分发 > 更新源请求策略
步骤 3) 在 /*
上启动新的无效
Debuging/Testing
的补充说明
- 我建议在终端而不是浏览器中使用
curl
进行测试,以避免缓存并查看详细信息。我做 curl -v https://example.com/cb?foo=bar1
.
- 在每次测试中不断增加查询字符串的值(上例中的
bar1
,到bar2
,bar3
),这样就不会再有缓存了。
我注意到 Amazon S3 Redirect rule - GET data is missing 但在遵循已接受的答案后,我的查询参数仍然没有被保留。
我有一个使用 React 和 React Router 的网站,这意味着我有几个 URL 加载相同的 HTML 和 JS,然后 JS 确定要加载应用程序的哪一部分在 URL.
例如:
/foo、/bar、/baz 都应该加载 index.html,加载 bundle.js。然后 bundle.js 观察 URL 并路由到某些 React 组件(也在 bundle.js 中)。
然而,S3 中不存在 foo、bar 或 baz 文件,只有 index.html。我想要做的是当我收到 404 时,重定向到 /#!/{URL}(例如 /foo 重定向到 /#!/foo)。这适用于我的重定向规则(如下)。但是,我也想带上查询参数(例如 /foo?ping=pong 重定向到 /#!/foo?ping=pong)但是 /foo?ping=pong 只是重定向到 /#!/foo.
这是我的重定向规则:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>http</Protocol>
<HostName>www.mydomain.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
有什么办法可以实现这个目标吗?理想情况下,每次添加新页面时都不必在 S3/CloudFront 中进行更改?
问题是我在 CloudFront 中设置了源不转发查询字符串,所以当 S3 收到请求时,它会在没有查询参数的情况下正确重定向。您可以在 CloudFront > 行为 > 转发查询字符串中找到此设置。
如果您想获得清晰的网址,也可以查看 this trick。您需要设置云端分发,然后在分发的 "Error Pages" 部分更改 404 行为。这样你就可以再次 domain.com/foo/bar
链接 :)
CloudFront/S3 中的菜单和选项随时间变化很大。
这是 2021 年 12 月的解决方案。
步骤 1) 在 CloudFront 中创建允许 QueryStrings 的“请求”策略
注意:您可能还想为 CORS 添加一些 Headers,例如 Origin
或 Access-Control-
...headers。
步骤 2) 转到您的分发 > 更新源请求策略
步骤 3) 在 /*
上启动新的无效
Debuging/Testing
的补充说明- 我建议在终端而不是浏览器中使用
curl
进行测试,以避免缓存并查看详细信息。我做curl -v https://example.com/cb?foo=bar1
. - 在每次测试中不断增加查询字符串的值(上例中的
bar1
,到bar2
,bar3
),这样就不会再有缓存了。