Behebung des CORS-Fehlers beim Abspielen von MP3-Dateien von einer anderen Website
P粉662361740
P粉662361740 2024-03-31 22:04:39
0
1
382

Das Problem, das ich habe, ist, dass meine React-App keine Audiodaten von anderen Quellen abspielt und einen CORS-Fehler erhält. Beispiel: https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3

Das Seltsame ist, dass ich, wenn ich https://www.w3schools.com/tags/tag_audio.asp besuche, die URL oben eingebe und auf „Play“ klicke.

Auf meiner lokalen React-App erhalte ich dann einen 302-Status und eine Weiterleitung. Das Audio-Tag enthält crossOrigin="anonymous" und die URL im src-Element.

Auf W3Schools wird irgendwie umgeleitet und ich erhalte von der umgeleiteten URL nur den Status 206.

So reproduzieren Sie:

  1. Git-Klon https://github.com/SamTV12345/PodFetch.git
  2. Folgen Sie den README-Anweisungen im Abschnitt „Build“
  3. git checkout Ursprung/Entwicklung
  4. Fügen Sie einen beliebigen Podcast mit mehr als 5 Episoden hinzu.
  5. Klicken Sie auf CloudIcon

P粉662361740
P粉662361740

Antworte allen(1)
P粉801904089

您需要通过 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 (
      
); } } ReactDOM.render(, document.getElementById("root"));



Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!