通过AWS API Gateway获取S3图片浏览器无法显示但Postman正常

问题场景 #

按照AWS官方手册《How do I upload an image or PDF file to Amazon S3 through API Gateway?》配置API Gateway展示S3存储桶图片后，出现以下问题：

• 浏览器打开API Gateway提供的图片链接时，会下载无法正常显示的异常文件
• Postman请求该链接可正常展示图片，下载的文件也能正常使用
• 直接通过AWS控制台上传到S3的图片，经API Gateway在浏览器中同样无法显示，排除上传流程问题

已完成的配置 #

• GET方法的Integration Request中，Content Handling设为Passthrough
• GET方法的Method Response（200状态）配置了Access-Control-Allow-Origin、Content-type
• GET方法的Integration Response（200状态）将Access-Control-Allow-Origin设为'*'，Content-type设为image/jpeg
• API设置中已添加image/jpeg为Binary Media Type
• 请求头包含Accept: image/jpeg、Content-Type: image/jpeg、Access-Control-Allow-Origin: *
• API已部署至最新版本，CORS启用正常

更新：重新配置GET请求，在Method Response的200响应头中添加Accept，并在Integration Response的Header Mappings中将Accept映射为image/jpeg，此时Postman可正常展示图片（未配置时Postman也无法正常展示），但浏览器仍存在异常下载问题。

解决方法 #

1. 调整Binary Media Type配置 #

检查API Gateway的Binary Media Type列表，确保：

• 只保留需要的图片类型（如image/jpeg），移除宽泛的通配符类型（如*/*），避免类型覆盖
• 修改后重新部署API到对应阶段

2. 修正Content-Type映射逻辑 #

不要硬编码Content-Type为image/jpeg，改为复用S3对象的原生类型：

• 在Integration Response的Header Mappings中，将Content-Type的映射值设为integration.response.header.Content-Type
• 确保Method Response中的Content-Type头处于启用状态

3. 配置Integration Response的Content Handling #

进入GET方法的Integration Response，将Content Handling设置为Convert to binary if needed，让API Gateway自动识别二进制数据并正确处理，避免图片被转为Base64格式导致浏览器无法识别。

4. 处理Content-Disposition响应头 #

浏览器触发下载通常是因为响应头包含Content-Disposition: attachment：

• 若S3对象元数据带有该头，直接在S3控制台修改对象元数据，移除Content-Disposition项
• 或在API Gateway的Integration Response中添加Content-Disposition头，映射值设为inline，强制浏览器直接展示图片而非下载

5. 重新部署并清除缓存 #

修改配置后必须重新部署API，同时使用浏览器无痕模式测试（或清除本地缓存），避免旧响应缓存干扰结果。

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