AWS S3 GET预签名URL间歇性CORS失败问题求助

解决方案 #

1. 拆分预览与下载的预签名URL

问题核心大概率是预签名URL的签名与实际请求参数不匹配：你当前代码生成URL时固定了responseContentDisposition，但react-modal-image的下载按钮发起请求时，可能修改或添加额外请求头，导致签名校验失败，浏览器把403错误识别为CORS问题（跨域场景下非2xx响应如果没有正确CORS头就会触发这个报错）。

建议拆分两个接口，分别生成预览用和下载用的预签名URL：

// 生成预览用URL（供img标签加载，不固定Content-Disposition）
public String generatePreviewLink(String bucketName, String key, int days) {
    GetObjectRequest objectRequest = GetObjectRequest.builder()
            .bucket(bucketName)
            .key(key)
            .build();

    GetObjectPresignRequest preSignRequest = GetObjectPresignRequest.builder()
            .signatureDuration(Duration.ofDays(days))
            .getObjectRequest(objectRequest)
            .build();

    return this.s3Presigner.presignGetObject(preSignRequest).url().toString();
}

// 生成下载用URL（设置attachment头，强制浏览器下载）
public String generateDownloadLink(String bucketName, String key, int days) {
    // 从key中提取文件名，也可由前端传入
    String fileName = key.substring(key.lastIndexOf("/") + 1);
    String disposition = String.format("attachment; filename=\"%s\"", fileName);

    GetObjectRequest objectRequest = GetObjectRequest.builder()
            .bucket(bucketName)
            .responseContentDisposition(disposition)
            .key(key)
            .build();

    GetObjectPresignRequest preSignRequest = GetObjectPresignRequest.builder()
            .signatureDuration(Duration.ofDays(days))
            .getObjectRequest(objectRequest)
            .build();

    return this.s3Presigner.presignGetObject(preSignRequest).url().toString();
}

前端调整逻辑：img标签使用预览URL，点击下载按钮时，调用后端获取下载专用URL，再自行创建a标签模拟点击完成下载（替代库自带的下载按钮）。

2. 更新S3 Bucket的CORS配置

在ExposeHeaders中添加Content-Disposition，确保浏览器能访问下载时需要的响应头：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "http://localhost:3000",
            "https://<my-host>"
        ],
        "ExposeHeaders": [
            "ETag",
            "Content-Disposition"
        ],
        "MaxAgeSeconds": 3000
    }
]

3. 规避缓存冲突

间歇性问题可能和浏览器缓存有关：当img加载后缓存了图片，下载时直接读取缓存不会触发新请求，所以正常；缓存失效时重新请求就触发错误。拆分预览和下载URL后，两者是独立的，能避免这种缓存冲突。

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