javascript - 如何在 S3 和 Cloudfront 托管的静态站点上保留不带尾部斜杠的路由查询参数

Question

我有一个静态生成的网站，已上传到 S3 并通过 Cloudfront 发行版公开 - 它有一个根 index.html 文件和几个静态生成的子页面(例如 /donate/index.html)。我已将存储桶配置为充当静态主机，并使用 index.html 作为索引文档。我可以通过直接访问 S3 前缀来访问这些页面，例如/donate/ 正确显示 /donate/index.html 中的 html。

问题在于 - 当我链接到 /donate?some=query&param=here 时，S3 自动 302 将这些没有尾部斜杠的页面重定向到带有尾部斜杠的页面，从而删除了所使用的查询参数通过我的客户端 JavaScript 来轻松跟踪状态。

例如 /donate?some=query&param=here 302 到 /donate/ 并丢失该上下文，这使得人们很难构建 URL，因为他们必须记住包含尾部斜杠(如果您希望网络爬虫记住新路由，则 HTTP 302 也是一个错误的 http 响应)。

以下是不起作用的内容:

• 将 Cloudfront 配置为使用分配缓存策略中的查询参数来缓存路由(Cloudfront > 分配 > 行为 > 编辑 > 缓存策略)
• 配置 Cloudfront 以在分配的源请求策略中转发查询参数(Cloudfront > 分配 > 行为 > 编辑 > 源请求策略)
• 配置 S3 存储桶以使用 S3 重定向规则重定向路由(S3 > 存储桶 > 属性 > 静态 Web 托管 > 重定向规则)

Answer 1

这就是最终破解它的方法 - 创建一个查看器请求 Cloudfront 函数来手动检查路径是否既不包含文件扩展名也不包含尾部斜杠，并在这些情况下添加一个。

function handler (event) {
    var request = event.request;
    var uri = request.uri;

    if( !uri.includes('.') && !uri.endsWith('/') ) {
        request.uri = uri + '/'
    }

    return request;
};

在 Cloudfront 中创建此函数(Cloudfront > 函数 > 创建函数)，然后将其附加到您的分配的行为(Cloudfront > 分配 > 行为 > 编辑 > 查看者请求 > Cloudfront 函数)。

确保在分发使用新设置完成初始化后使站点失效，并通过 CURL 测试新路由 - 您应该会看到以下行为更改:

# BEFORE:
curl -v --location http://example.com/donate?please=keep > /dev/null
> GET /donate?please=keep
> RESP 302
> GET /donate/
> RESP 200

# AFTER
curl -v --location http://example.com/donate?please=keep > /dev/null
> GET /donate?please=keep
> RESP 200

还有别的办法吗？我会后悔为每次 Cloudfront 函数调用付费吗？有没有办法通过纯粹的 Cloudfront 或 S3 策略更改来实现这一点？