Light Gallery图片下载异常：本地正常生产环境打开新标签页

我之前碰到过几乎一模一样的场景，咱们先把问题捋清楚：本地服务器上用Light Gallery打开图片后，下载功能完全正常；但切换到HTTPS加密的生产环境（图片存储在Amazon S3）时，点击下载按钮会直接在新标签页打开图片预览，根本触发不了浏览器的下载弹窗。

可能的核心原因 #

1. S3桶的CORS配置缺失关键规则：生产域名的跨域请求没有被允许，或者S3没有暴露触发下载的必要响应头给浏览器。
2. S3图片对象缺少下载触发头：如果S3上的图片没有设置Content-Disposition: attachment响应头，浏览器会默认把它当成可预览资源，直接打开而不是下载。
3. HTTPS环境下的Light Gallery逻辑适配问题：本地HTTP环境下的下载触发逻辑，在HTTPS + S3的跨域组合场景下失效了。

具体解决方案 #

1. 配置Amazon S3的CORS规则

登录AWS控制台找到目标S3桶，进入「权限」>「跨域资源共享（CORS）」，替换成包含以下规则的配置（把your-production-domain.com换成你的实际生产域名）：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["https://your-production-domain.com"],
        "ExposeHeaders": ["Content-Disposition"]
    }
]

这里的ExposeHeaders是核心——它允许浏览器读取S3返回的Content-Disposition头，没有这个设置，浏览器识别不到下载指令。

2. 给S3图片添加Content-Disposition头

有两种方式处理：

• 批量修改已上传图片：用AWS CLI批量更新（替换成你的桶路径和文件名）：

aws s3 cp s3://your-bucket/image-path/ s3://your-bucket/image-path/ --recursive --content-disposition "attachment" --metadata-directive REPLACE

• 上传时直接设置：后续上传图片到S3时，在上传参数里指定Content-Disposition: attachment; filename="xxx.jpg"，从根源解决问题。

3. 调整Light Gallery的下载逻辑（兜底方案）

如果S3配置生效后还是有问题，可以自定义Light Gallery的下载触发逻辑，绕过默认行为：

// 初始化Light Gallery时添加自定义下载配置
lg = $('#lightgallery').lightGallery({
    iframeMaxWidth: '80%',
    download: true,
    // 自定义下载URL，强制带上触发下载的参数
    downloadUrl: function(item) {
        return item.src + '?response-content-disposition=attachment; filename="' + item.subHtml.match(/<h4>(.*?)<\/h4>/)[1] + '"';
    }
});

// 或者监听下载事件，手动创建下载链接
$('#lightgallery').on('lgDownload', function(event, index, item) {
    event.preventDefault();
    const downloadLink = document.createElement('a');
    // 提取图片文件名
    const fileName = item.subHtml.match(/<h4>(.*?)<\/h4>/)[1];
    downloadLink.href = item.src;
    downloadLink.download = fileName;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
});

验证步骤 #

1. S3的CORS配置保存后，等个3-5分钟让配置生效（AWS偶尔会有延迟）。
2. 打开浏览器开发者工具的「网络」面板，点击下载按钮，查看S3返回的响应头里是否有Content-Disposition: attachment。
3. 测试下载功能，确认是否弹出保存对话框而非打开新标签页。

内容的提问来源于stack exchange，提问作者Dharmesh Rakholia