CSS中background-image的URL被OpaqueResponseBlocking拦截的原因排查

为什么CSS背景图被拦截，img标签却正常？ #

• 浏览器对不同资源的CORS限制等级不同：img标签属于被动媒体资源，浏览器对它的跨域加载限制更宽松——哪怕跨域资源没返回正确的CORS响应头，也能正常渲染（只是会返回opaque类型的响应，无法通过JS读取内容）；但CSS中的background-image属于样式关联资源，浏览器对这类资源的跨域管控更严格，一旦资源返回opaque响应，就会触发OpaqueResponseBlocking拦截，防止潜在的安全风险（比如利用跨域资源做用户指纹追踪）。
• DigitalOcean Spaces的CORS配置缺失：你大概率没给Spaces存储桶配置允许你网站域名访问的CORS规则。img标签靠宽松策略绕过了限制，但CSS背景图的加载请求因为没有合法的CORS头，被浏览器的安全机制拦下了。

解决方法 #

• 登录DigitalOcean控制台，找到目标Spaces存储桶，进入Settings > CORS Configuration。
• 添加一条CORS规则，允许你的网站域名（例如https://your-django-site.com），允许GET方法，同时配置必要的响应头。示例规则如下：

  [
    {
      "AllowedOrigins": ["https://your-django-site.com"],
      "AllowedMethods": ["GET"],
      "AllowedHeaders": ["Content-Type"],
      "ExposeHeaders": ["Content-Type"]
    }
  ]
  

• 保存配置后刷新页面，CSS背景图即可正常加载。

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