解决播放来自另一个网站的mp3文件的CORS错误

Question

我遇到的问题是，我的 React 应用程序无法播放来自其他来源的音频，并出现 CORS 错误。 示例：https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3

奇怪的是，当我访问 https://www.w3schools.com/tags/tag_audio.asp 时，输入上面的网址并单击播放即可。

在我的本地 React 应用程序上，我随后获得 302 状态和重定向。音频标记包含 crossOrigin="anonymous" 和 src 元素中的 url。

在 W3Schools 上，它会以某种方式进行重定向，我只从重定向的 URL 中获得状态 206。

如何重现：

1. git 克隆 https://github.com/SamTV12345/PodFetch.git
2. 遵循“构建”部分中的自述文件说明
3. git checkout 起源/开发
4. 添加任何超过 5 集的播客。
5. 点击 CloudIcon

Answer 1

您需要通过 new Audio(url) 而不是 XMLHttpRequest 导入 mp3 URL，以避免 CORS。例如：

class PlaySound extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      play: false
    };

    this.url = "https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3";
    this.audio = new Audio(this.url);
    this.togglePlay = this.togglePlay.bind(this);
  }

  togglePlay() {
    const wasPlaying = this.state.play;
    this.setState({
      play: !wasPlaying
    });

    if (wasPlaying) {
      this.audio.pause();
    } else {
      this.audio.play();
      setInterval(()=>{
        console.clear();
        let seconds = new Date().getSeconds();
        let points = '.'.repeat(seconds % 4);
        console.log(`Loading audio${points}`);
      }, 1000);
    }
  }

  render() {
    return (
      

         {this.state.play ? "Pause" : "Play"}
          
        
      
    );
  }
}

ReactDOM.render(, document.getElementById("root"));

sssccc
sssccc