Chrome浏览器无法加载跨域WAV音频文件问题求助

你遇到的这个问题核心原因是Chrome对跨域媒体资源的CORS（跨源资源共享）策略执行比Firefox更严格，导致音频加载卡住，promise一直处于pending状态。

为什么会有浏览器差异？ #

Firefox在处理未设置crossorigin属性的跨域媒体资源时，会采用相对宽松的策略，允许加载并播放；但Chrome要求跨域媒体资源必须满足严格的CORS规则：要么服务器返回允许跨域的响应头，要么前端明确声明跨域请求模式，否则浏览器会阻止资源的读取流程，导致加载流程停滞，对应的promise也就一直pending。

解决办法 #

你可以从两个方面入手解决：

1. 前端代码添加跨域声明

给你的<audio>标签加上crossorigin="anonymous"属性，告诉浏览器以跨域模式请求资源：

<html> 
<head> 
<title>Audio Demo</title> 
<script type="text/javascript"> 
function updateSource(){ 
  var audio = document.getElementById('wavSource'); 
  audio.src = 'A REMOTE URL FOR WAV AUDIO'; 
  var a = document.getElementById('audio'); 
  a.load(); 
} 
</script> 
</head> 
<body> 
<audio id="audio" controls="controls" crossorigin="anonymous"> 
<source id="wavSource" src="" type="audio/wav"></source> 
Your browser does not support the audio format. 
</audio> 
<button onclick="updateSource();">Item1</button> 
</body> 
</html>

2. 服务器端配置CORS响应头

在托管WAV音频的服务器上，添加允许跨域的响应头（以Nginx为例，其他服务器配置逻辑类似）：

add_header Access-Control-Allow-Origin *;

如果要更安全，可以把*替换成你的前端页面所在的域名，比如https://your-domain.com，这样只允许指定域名跨域请求该音频资源。

关于pending promise的说明 #

当Chrome检测到跨域媒体资源不符合CORS规则时，会中断资源的加载流程，但不会直接抛出错误，而是让加载相关的promise一直处于pending状态——这是浏览器的安全机制，防止未授权的跨域资源被脚本读取或操作。

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