React应用播放跨域MP3时遭遇CORS错误问题排查

问题详情 #

• React应用无法播放第三方源的音频，触发CORS错误，示例音频地址：https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3
• 同一音频地址在W3Schools的audio标签演示页面输入后可正常播放
• 本地React应用中请求该音频时返回302状态码并触发重定向，audio标签已配置crossOrigin="anonymous"，src属性填入上述音频地址
• W3Schools页面中则完成了重定向流程，仅收到重定向后地址返回的206状态码

复现步骤 #

1. 执行命令：git clone https://github.com/SamTV12345/PodFetch.git
2. 按照项目README中Building章节的说明完成构建操作
3. 执行命令：git checkout origin/develop
4. 添加任意包含5集以上内容的播客
5. 点击页面中的Cloud图标

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