在GatsbyJs中如何修改图片的S3路径以隐藏实际存储桶地址？

1. 反向代理转发（最通用，无生态绑定） #

• 你可以在后端服务或接入层网关新增专门的图片路由，例如/api/images/{fileKey}，前端所有图片请求都走该路由，网关/后端收到请求后内部拉取S3对应文件，将文件流返回给前端即可。
• 最终前端img标签格式为<img src="/api/images/file-name.jpg" />，完全不会暴露S3桶域名、桶名等敏感信息。
• 如果你用Nginx作为接入网关，不需要修改业务代码，直接新增反向代理配置即可，参考配置片段：

location /api/images/ {
    # 转发到对应S3桶
    proxy_pass https://bucketname-temp.s3.amazonaws.com/;
    # 隐藏所有S3专属响应头，避免信息泄露
    proxy_hide_header x-amz-id-2;
    proxy_hide_header x-amz-request-id;
    proxy_hide_header x-amz-bucket-region;
    proxy_set_header Host bucketname-temp.s3.amazonaws.com;
    # 可自行添加缓存配置，降低S3请求成本
    proxy_cache s3_cache;
    proxy_cache_valid 200 7d;
}

• 额外收益：该层可叠加访问权限校验、流量管控、盗链防护等能力，安全性远高于直接暴露S3桶。

2. AWS CloudFront CDN封装（适合AWS生态用户） #

• 如果你本身在使用AWS服务，可以给S3桶绑定CloudFront CDN分发，配置你自己的业务域名（比如static.yourdomain.com）作为CDN访问域名，前端看到的图片地址为https://static.yourdomain.com/file-name.jpg，不会暴露原始S3桶地址。
• 注意配置时需要关闭S3桶公共访问权限，仅允许CloudFront的*源访问身份（OAI）*拉取S3内容，避免用户绕过CDN直接访问S3桶。

3. 预签名URL+反向代理组合（适合私有图片场景） #

• 如果你的图片属于私有资源，需要权限管控，可以先用S3预签名URL能力生成带过期时间的临时访问链接，再搭配反向代理方案隐藏S3域名，既保证路径不泄露，也避免资源被永久盗用。

不推荐的方案 #

• 不要使用前端JS动态替换src的方式，这种只是表面修改了DOM属性，用户打开浏览器控制台的网络请求面板依然可以查看到原始S3地址，没有实际防护效果。
• 不要使用第三方路径隐藏插件，这类插件大多要求你将S3的访问权限开放给第三方服务商，反而会大幅提升数据泄露风险。

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