HTML5音频audio跨域的记录

跨域的系列内容之一。

跨域问题简单讲就是资源获取问题，但深入的讲，还得分为你是用什么操作去获取数据，获取数据的程序来定。今天记录典型的音频audio跨域问题。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

载入跨域音频

读取并不预加载，正常，可播放。

下载跨域音频

读取并预加载，失败，提示跨域。

解决资源跨域

参考之前写的文章

• No Access-Control-Allow-Origin 跨域错误解决
• Nginx的跨域Content Security Policy通行设置

按角色来分

1. 前端解决：如本文的音频跨域，解决方案可能跟你的实现逻辑有关，如果你不预加载的话，或避开预加载就可以。
2. 后端解决：如PHP，PYTHON，JAVA在请求时设置 Access-Control-Allow-Origin "*"。这里还要留意的是，很多跨域资源请求（例如AJAX）可以根据设置参数解决。
3. 服务端解决：配置请求时的域资源白名单。