使用多源Azure CDN时出现CORS错误的解决方案咨询

针对Azure CDN Standard端点在多Origin场景下切换环境时WOFF字体出现的CORS缓存冲突问题，以下是除设置Access-Control-Allow-Origin: *并搭配WAF之外的可行方案：

方案1：将Origin头纳入CDN缓存键 #

• 核心原理：通过自定义CDN缓存键，把请求的Origin头作为缓存键的一部分，让不同Origin的请求生成独立的缓存条目，彻底避免跨Origin的缓存污染。
• 操作步骤：
  1. 进入Azure CDN端点的「缓存规则」配置页
  2. 创建自定义缓存规则，路径匹配设为*.woff（或更精准的字体资源路径）
  3. 在「缓存键」配置区域，勾选「包含请求头」，并添加Origin头到包含列表
  4. 调整规则优先级，确保该规则高于默认缓存规则，同时保留原有CORS响应头修改规则
• 注意事项：会增加CDN缓存条目数量，需评估缓存容量与成本，但WOFF字体属于低频更新资源，实际影响可控。

方案2：为不同环境分配独立CDN路径前缀 #

• 核心原理：为主站和预览站分别配置CDN下的专属路径前缀（如/prod/和/preview/），通过路径隔离实现CORS规则的独立生效，避免缓存冲突。
• 操作步骤：
  1. 在CDN端点的规则引擎中创建两条独立规则：
     • 规则1：匹配路径/prod/*，当请求Origin为https://sitename.com时，设置Access-Control-Allow-Origin: https://sitename.com
     • 规则2：匹配路径/preview/*，当请求Origin为https://sitename-preview.com时，设置Access-Control-Allow-Origin: https://sitename-preview.com
  2. 调整前端资源引用，主站加载https://cdn.example.com/prod/下的字体，预览站加载https://cdn.example.com/preview/下的字体
• 注意事项：需同步调整前端资源路径，适合已有环境区分路径规范的场景，无需修改缓存键规则。

方案3：源服务器动态生成CORS头+禁用CDN对CORS头的缓存 #

• 核心原理：让源服务器（如Azure Storage、App Service）根据请求Origin返回对应CORS头，同时配置CDN不缓存Access-Control-Allow-Origin头，确保每次请求都获取最新的匹配头。
• 操作步骤：
  1. 源服务器配置：
     • 若为Azure Storage：在存储账户CORS设置中，添加https://sitename.com和https://sitename-preview.com到允许Origin列表，开启动态匹配
     • 若为App Service：在后端代码中读取请求Origin头，验证是否在允许列表后返回对应的Access-Control-Allow-Origin头
  2. CDN配置：在「缓存规则」中为*.woff资源设置「不缓存响应头」，将Access-Control-Allow-Origin加入不缓存列表
• 注意事项：会增加源服务器请求量，适合源服务器负载较低的场景，CDN仅缓存资源内容，不缓存CORS头。

方案4：添加Vary: Origin响应头 #

• 核心原理：通过CDN规则引擎为WOFF字体响应添加Vary: Origin头，告知浏览器根据不同Origin缓存独立的响应版本，即使CDN端缓存了统一响应，浏览器也会自动区分。
• 操作步骤：
  1. 在CDN端点的规则引擎中创建新规则，路径匹配设为*.woff
  2. 添加「修改响应头」动作：若响应中已有Vary头，追加Origin（用逗号分隔）；若无则直接设置Vary: Origin
  3. 保留原有CORS响应头修改规则
• 注意事项：依赖现代浏览器对Vary头的规范支持，旧浏览器可能存在兼容性问题，但无需修改CDN缓存键或源服务器架构。

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