通过iframe渲染资源时触发CORS错误，寻求解决方案

错误信息明确显示：请求的源是https://frontend.com，但存储桶返回的Access-Control-Allow-Origin是https://iframe.com，两者不匹配才触发了CORS拦截。

你可能误以为请求是iframe发起的，但实际上这个请求的源被识别成了主页面的域名，大概率是这几个原因：

• 视频播放逻辑（比如用了HLS.js这类库）是主页面的JS代码触发的，而非iframe内部独立发起
• iframe的sandbox属性配置错误，导致源信息被篡改
• 存储桶的CORS规则顺序有问题，优先匹配到了仅允许https://iframe.com的规则，没触发允许https://frontend.com的配置

1. 修正存储桶CORS配置 #

谷歌云存储的CORS配置要同时包含两个域名，尽量不要分开设置独立规则（除非两个域名的权限要求不同），避免匹配优先级出问题。正确配置示例：

[
  {
    "origin": ["https://frontend.com", "https://iframe.com"],
    "method": ["GET"],
    "responseHeader": ["Content-Type", "Range"],
    "maxAgeSeconds": 3600
  }
]

2. 确认请求发起方 #

打开浏览器开发者工具的「网络」面板，找到该m3u8请求，查看「发起者」列，确认请求是由iframe页面发起，还是主页面代码发起。如果是主页面发起的，需要调整逻辑，让视频播放完全由iframe内部处理。

3. 检查iframe属性设置 #

如果iframe使用了sandbox属性，要确保配置正确。比如仅设置sandbox="allow-scripts"但未添加allow-same-origin，会导致iframe的源被识别为null，引发异常。若确实需要sandbox，按以下格式配置：

<iframe src="https://iframe.com/video-page" sandbox="allow-scripts allow-same-origin allow-top-navigation"></iframe>

4. 验证CORS配置是否生效 #

修改存储桶配置后，需等待几分钟让配置生效。可以用curl命令测试：

curl -H "Origin: https://frontend.com" -I "https://storage.googleapis.com/bucket/videos/video.m3u8"

检查响应头中是否包含Access-Control-Allow-Origin: https://frontend.com，存在则说明配置已生效。

内容的提问来源于stack exchange，提问作者Pato P