HTML5音视频跨域需服务端配置CORS响应头，因浏览器对媒体元数据访问有严格限制；必须返回Access-Control-Allow-Origin和Access-Control-Allow-Headers: Range，且前端需设crossorigin属性。
HTML5 中的 <audio></audio> 和 <video></video> 标签在加载跨域媒体资源（如 MP3、MP4、WebM）时，若服务端未正确配置 CORS，浏览器会因安全策略拒绝解码或播放，即使资源能正常 HTTP 获取。
为什么跨域音视频需要特殊 CORS 处理
不同于图片或脚本，浏览器对媒体资源的跨域访问有更严格要求：当 JS 调用 audio/video.play()、读取 duration、buffered 或使用 MediaSource 时，必须确保响应头包含 Access-Control-Allow-Origin。否则控制台报错 “Origin is not allowed by Access-Control-Allow-Origin”，且 loadedmetadata 等事件可能不触发。
注意：仅设置 crossorigin="anonymous" 不够，服务端必须响应有效 CORS 头，否则浏览器仍视为“不透明响应”，禁止 JS 访问媒体元数据。
服务端 CORS 响应头关键配置
媒体资源服务器需在响应中返回以下至少两项：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
Access-Control-Allow-Origin: *或指定域名（如https://example.com），不可为*同时设置Credentials -
Access-Control-Allow-Headers: Range（必需）——支持分片请求（HTTP Range），否则 Safari/Chrome 可能无法流式加载或拖拽 - 若需携带 Cookie 或认证头，还需：
Access-Control-Allow-Credentials: true+ 前端crossorigin="use-credentials" - 推荐附加：
Access-Control-Expose-Headers: Content-Range, X-Content-Range，便于 JS 读取分块信息
示例 Nginx 配置片段：
location ~ \.(mp3|mp4|webm|ogg)$ {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Access-Control-Expose-Headers' 'Content-Range, X-Content-Range';
add_header 'Access-Control-Max-Age' 2592000;
}
前端 HTML 与 JS 的正确引用方式
必须显式声明 crossorigin 属性，否则浏览器不会发起带 Origin 的预检或简单请求：
-
基础用法（无需凭证）：
<video crossorigin="anonymous" src="https://cdn.example.com/video.mp4"></video> -
需 Cookie 认证时：
<video crossorigin="use-credentials" src="https://api.example.com/secure.mp4"></video>，且服务端需设Access-Control-Allow-Credentials: true -
JS 动态加载时同样生效：
const v = new Video(); v.crossOrigin = 'anonymous'; v.src = url; - 避免漏掉：Canvas 绘制视频帧（
drawImage）、Web Audio API 解码（decodeAudioData）也依赖相同 CORS 策略
调试与常见误区
遇到播放失败时，按此顺序排查：
- 打开开发者工具 → Network → 找媒体请求 → 检查响应头是否含
Access-Control-Allow-Origin和Access-Control-Allow-Headers: Range - 确认请求方法是
GET（非OPTIONS预检）——媒体资源通常走简单请求，但若带自定义头则会触发预检，需服务端额外支持 - 不要混淆：CDN 缓存可能缓存了无 CORS 头的旧响应，可加版本参数（
?v=1.0.1）或清除缓存 - Safari 对
crossorigin更敏感，即使 HTML 写了，若服务端头缺失，networkState可能卡在NETWORK_NO_SOURCE
