如何在AWS CloudFront中通过请求参数动态覆盖Content-Type响应头？

要实现通过请求参数response-content-type覆盖CloudFront响应的Content-Type，你可以借助CloudFront Viewer Response函数来实现，步骤如下：

1. 创建CloudFront Viewer Response函数 #

在CloudFront控制台中创建一个新的函数，选择「Viewer Response」触发类型，编写以下逻辑代码：

function handler(event) {
    const response = event.response;
    const request = event.request;
    const queryParams = request.querystring;

    // 检查请求中是否携带response-content-type参数
    if (queryParams['response-content-type'] && queryParams['response-content-type'].value) {
        const targetType = queryParams['response-content-type'].value;
        // 替换响应头的Content-Type值
        response.headers['content-type'] = { value: targetType };
    }

    return response;
}

写完后发布函数到生产环境。

2. 将函数关联到你的CloudFront分发 #

• 打开目标CloudFront分发的「行为」设置页面，编辑对应的缓存行为
• 在「函数关联」区域，找到「Viewer Response」类型，选择你刚创建并发布的函数
• 保存更改，等待CloudFront完成部署（一般需要5-10分钟）

3. 验证功能 #

访问你的CloudFront分发URL，添加response-content-type参数测试，比如：
https://your-cloudfront-domain/foo/bar?response-content-type=image/jpeg
检查响应头的Content-Type，确认已被替换为指定的值；再测试application/pdf等其他类型，验证动态生效。

注意事项 #

• 确保CloudFront行为的查询参数设置中，允许传递response-content-type（默认允许所有参数，若设置了白名单需手动添加）
• 如果需要为不同Content-Type的请求缓存独立版本，可在CloudFront缓存策略中，将response-content-type查询参数加入缓存键的组成部分，避免缓存冲突

内容的提问来源于stack exchange，提问作者Alex A.