CloudFront配置可选size查询参数的图片缓存失效问题求解

针对你遇到的无size参数请求无法缓存的问题，以下是两种可行的优化配置方案：

方案1：使用CloudFront Functions统一参数（最推荐） #

这个方案逻辑清晰、性能损耗极低，完全匹配你的业务规则：

• 新建一个运行在viewer request阶段的CloudFront Functions，逻辑为：检查请求是否携带size查询参数，未携带则主动追加size=large参数后再继续处理
• 原有缓存键配置保持不变，仅以size作为缓存键参数即可

配置后所有请求的参数会先做归一化处理：

• 用户请求/images/cat会被自动转为/images/cat?size=large，和直接请求/images/cat?size=large命中同一份缓存
• 携带size=medium/size=small的请求仍会生成独立缓存，不影响原有逻辑

参考函数代码：

function handler(event) {
    const request = event.request;
    request.querystring = request.querystring || {};
    if (!request.querystring.size) {
        request.querystring.size = { value: 'large' };
    }
    return request;
}

该函数执行耗时小于1ms，属于CloudFront免费额度覆盖范围，几乎不会产生额外成本。

方案2：调整缓存相关配置 #

如果你不想新增函数，也可以通过以下调整实现需求：

• 缓存键策略仍配置为包含size参数
• 检查源站的缓存响应头配置，确保无size参数的请求返回的Cache-Control头包含合理的公共缓存时间，若源站返回private/no-cache等头会直接导致CloudFront无法缓存无参数请求

注意如果你的业务规则是无size参数等价于size=large，该方案会在缓存中存储两份内容完全相同的缓存条目，会占用一定的缓存空间，因此优先推荐方案1。

内容的提问来源于stack exchange，提问作者M'Goops