Netlify部署站点后无法正常加载AWS S3存储桶内的图片资源

问题原因与修复方案 #

1. 优先排查混合内容拦截问题 #

你当前使用HTTP协议加载S3资源，而Netlify部署的站点默认走HTTPS协议，主流浏览器会默认拦截HTTPS站点下的HTTP资源请求，这是最常见的故障原因。
修复方式：将img标签的src属性中http改为https即可，修改后的代码如下：

<div class="project-card">
        <img
          src="https://baitbots.cdn.s3-website-us-west-1.amazonaws.com/NYT-API-min.png"
          alt="image of New York Times API web application" />
        <p class="project-title">New York Times API</p>
  <div>

2. 协议修改后仍无法加载则调整S3 CORS配置 #

如果修改协议后仍无法加载，是跨域资源共享限制导致：S3默认禁止跨域域名访问资源，需要在S3控制台给对应存储桶添加CORS规则，允许你的Netlify站点域名访问资源，示例规则如下：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["https://你的Netlify站点域名"],
        "ExposeHeaders": []
    }
]

如果是测试阶段可以暂时把AllowedOrigins设为["*"]放开所有域名访问，生产环境请替换为你实际的Netlify站点域名

3. 额外检查项 #

如果以上两步都操作后仍有问题，检查S3存储桶的权限配置中是否设置了referer防盗链规则，如果有，需要把你的Netlify站点域名加入白名单。

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