将 CORS 标头与 CSS 背景图像一起使用

Posted 2023-03-04

【中文标题】将 CORS 标头与 CSS 背景图像一起使用

【英文标题】：Using CORS headers with CSS background-image

【发布时间】：2014-03-05 12:08:18

【问题描述】：

简短地说：有没有办法在 CSS 中使用 background-image 属性对图像进行跨源请求。我需要类似 crossOrigin 属性的 img 标签，但在 CSS 中。

我遇到了一个问题，因为 chrome 缓存了没有 CORS 标头的响应，然后，当 <img> 标记使用相同的源时，我得到了一个跨域错误，因为它使用的缓存响应没有具有必要的 CORS 标头。

【问题讨论】：

为什么不直接在 img src URL 中附加一个“cache buster”查询参数（比如时间戳）？

这可能是我最终会做的，除非有更好的解决方案。

这实际上对我不起作用。我发送请求以响应 302 重定向到不同 URL 的 URL，并且正在缓存的是第二个 URL。为了破坏缓存，我需要服务器向重定向的 URL 添加查询参数，这并不理想。

经过一些研究，我确定真正的问题是 Amazon S3 没有设置“Vary: Origin”标头，即使它被配置为支持 CORS。如果有人知道如何让 S3 做到这一点，那也是一个很好的答案。

【参考方案1】：

检查此 API。我想您需要配置您的请求以获取标头以绕过缓存响应..

http://docs.aws.amazon.com/AmazonS3/latest/API/RESTCommonResponseHeaders.html

【讨论】：

正如我在上面的评论中提到的，缓存的 url 来自 302 重定向，所以我对实际请求没有太多控制权。