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

Posted 2023-03-27

【中文标题】CloudFront CORS 标头被缓存，导致跨源问题

【英文标题】：CloudFront CORS headers getting cached, resulting in cross origin problems

【发布时间】：2020-12-29 03:30:06

【问题描述】：

我的网站正在从具有以下配置的 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 存储桶连接到具有以下缓存/源策略的 CloudFront 分配：

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

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

有没有办法不缓存原始标头，因此 example1.com 和 example2.com 都可以使用自己的来源获取image.jpg？我尝试从缓存策略中删除标头，但没有任何运气。

报错如下（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，它就可以正常工作。所以一定是缓存。

【问题讨论】：

你能显示确切的错误信息吗？

@jellycsc 我现在用错误消息编辑了问题

【参考方案1】：

既然您已经在缓存键中包含了Origin，我认为您不会再遇到这个问题了。只需创建一个无效的路径/*，问题就会得到解决。

【讨论】：

谢谢，我是 CloudFront 新手，所以想确认一下。我现在做了失效。所以为了更好地理解：如果我在缓存键中包含标头，这意味着缓存将为每个源请求创建一个对象，对吧？

是的，来自不同来源的请求会命中不同的对象@Xersus