Amazon S3重定向规则 - 保留查询参数

Question

我注意到了Amazon S3重定向规则 - 缺少GET数据,但在遵循接受的答案后,我的查询参数仍然没有被保留.

我有一个使用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中进行更改？

Answer 1

问题是我在CloudFront中设置了原点而不是转发查询字符串,所以当S3收到请求时,它会在没有查询参数的情况下正确地重定向.您可以在CloudFront>行为>转发查询字符串中找到此设置.

Answer 2

CloudFront/S3 中的菜单和选项随着时间的推移发生了很大变化。

这是 2021 年 12 月的解决方案。

步骤 1) 在 CloudFront 中创建允许查询字符串的“请求”策略

注意：您可能还想为 CORS 添加一些标头，例如Origin或Access-Control-... 标头。

步骤 2) 转到您的发行版 > 更新源请求策略

步骤 3) 踢出新的失效/*

调试/测试的附加说明

1. 我建议使用curl终端而不是浏览器进行测试，以避免缓存并查看详细信息。我愿意curl -v https://example.com/cb?foo=bar1。
2. 每次测试时不断增加查询字符串的值（bar1在上面的示例中为 to bar2、bar3），以确保不再进行缓存。