Correction d'une erreur CORS lors de la lecture de fichiers mp3 à partir d'un autre site Web

Question

Le problème que je rencontre est que mon application React ne lit pas l'audio d'autres sources et obtient une erreur CORS. Exemple : https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3

Ce qui est étrange, c'est que lorsque je visite https://www.w3schools.com/tags/tag_audio.asp, je saisis l'URL ci-dessus et clique sur play.

Sur mon application React locale, j'obtiens alors un statut 302 et une redirection. La balise audio contient crossOrigin="anonymous" et l'url dans l'élément src.

Sur W3Schools, il redirige d'une manière ou d'une autre et je n'obtiens que le statut 206 de l'URL redirigée.

Comment reproduire :

1. clone de git https://github.com/SamTV12345/PodFetch.git
2. Suivez les instructions README dans la section "Build"
3. git checkout origine/développement
4. Ajoutez n'importe quel podcast de plus de 5 épisodes.
5. Cliquez sur CloudIcon

Answer 1

Vous devez importer l'URL mp3 via new Audio(url) 而不是 XMLHttpRequest pour éviter CORS. Par exemple :

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