CloudFront CORS headers 被缓存，导致跨源问题

Question

我的网站正在从具有以下配置的 S3 存储桶加载图像：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

此 S3 存储桶已连接到具有以下 cache/origin 策略的 CloudFront 分配：

我的网站使用多个域，例如example1.com、example2.com，它完美地加载了所有图像。当某些库或 SDK 尝试访问这些图像时，问题就开始了，我有时会随机出现跨源错误。

我认为问题在于 CloudFront 缓存了源。因此，如果用户尝试从 example1.com 获取 image.jpg，然后其他用户尝试从 example2.com 获取 image.jpg，则 CloudFront 将原点 example1.com 缓存到请求，这将导致交叉原点。为了克服这个问题，我使用 ?v=randomInt 查询参数。这是不好的做法，因为我总是得到 image.jpg 的新副本并且实际上不使用缓存。

有没有办法不缓存来源 headers，这样 example1.com 和 example2.com 都可以用自己的来源获取 image.jpg？我尝试从缓存策略中删除 headers，但没有成功。

报错如下（watermark.js尝试取crossorigin="anonymous"的图片后：

Access to image at 'https://cdn.treedis.com/tours/3453/tags/icons/8d2d0686-b3b9-4693-8167-0b652793c224.png' from origin example2.com has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

一旦我将 ?v=1234 添加到图像的 URL 中，它就可以正常工作。所以一定是缓存。

Answer 1

因为您已经将 Origin 包含在您的缓存键中，我认为您不会再遇到这个问题。只需创建一个路径失效 /*，问题有望得到解决。

CloudFront CORS headers 被缓存，导致跨源问题

CloudFront CORS headers getting cached, resulting in cross origin problems

amazon-s3

caching

cors

amazon-cloudfront