使用localhost Blob URL加载音频时违反CSP策略的问题求助

问题原因 #

你的CSP media-src 指令仅允许了HTTP协议的源（self、127.0.0.1 及其端口），但通过 window.URL.createObjectURL 生成的Blob URL使用的是 blob: 协议，不在当前允许的范围内，因此被浏览器拦截。

解决方法 #

修改你的Content Security Policy配置，在 media-src 规则中添加 'blob:' 选项，示例如下：

media-src 'self' 127.0.0.1 127.0.0.1:9201 127.0.0.1:9200 'blob:';

补充说明 #

CSP的源规则不仅包含域名和端口，还涵盖资源协议类型。Blob URL属于浏览器本地生成的特殊资源协议，必须显式在对应指令（这里是media-src）中声明允许，才能被正常加载。

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