使用具有多个源的 Azure CDN 时出现 CORS 错误

Question

我们在 Azure CDN Standard 端点上设置了自定义规则，以根据请求的 Origin 修改（覆盖）响应标头。在定义的规则中，我们将 Access-Control-Allow-Origin 标头值设置为与以下站点的所有域的请求的 Origin 相同的值。

我们有多个站点从 CDN URL 获取数据：

• 主要内容交付环境
• 预览内容交付环境

访问站点和在环境之间切换时，我们看到一些 CORS 错误。这些似乎都与 .woff 扩展名字体文件有关。这是一个错误示例：

Access to font at 'https://cdn.example.com/example.woff' from origin 'https://sitename.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://sitename-preview.com' that is not equal to the supplied origin.

如果您已从已从 CDN 请求资产的不同 URL 访问站点，则为 CDN 端点设置的规则就好像未得到确认。

微软已经承认多源场景存在问题：https://learn.microsoft.com/en-us/azure/cdn/cdn-cors，但提出的解决方案仅适合单源。如果我们将多个源添加到单独的规则中，那么当浏览器缓存第一个 CORS 源的 Access-Control-Allow-Origin 标头时，我们仍然会遇到问题。

除了将 Access-Control-Allow-Origin 标头更改为 * 并将 CDN 放在 WAF 后面之外，是否有任何解决方法？我读到 CORS 规范在这里是全部或全部：Access-Control-Allow-Origin 通配符子域、端口和协议，其中投票最多的答案指出它仅支持 *、null 或确切的协议 + 域 +港口。

Answer 1

我们通过在 Azure CDN 终结点缓存规则中将 .woff 扩展文件的响应标头中的 Cache-Control 属性设置为“无缓存”来解决此问题。