Betulkan ralat CORS memainkan fail mp3 dari tapak web lain

Question

Masalah yang saya hadapi ialah apl React saya tidak akan memainkan audio daripada sumber lain dan mendapat ralat CORS. Contoh: https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3

Yang peliknya ialah apabila saya melawat https://www.w3schools.com/tags/tag_audio.asp, saya masukkan URL di atas dan klik main.

Pada apl React tempatan saya, saya kemudian mendapat status 302 dan ubah hala. Teg audio mengandungi crossOrigin="anonymous" dan url dalam elemen src.

Di W3Schools ia mengubah hala entah bagaimana dan saya hanya mendapat status 206 daripada URL yang diubah hala.

Cara membiak:

1. git klon https://github.com/SamTV12345/PodFetch.git
2. Ikuti arahan README dalam bahagian "Bina"
3. git checkout asal/pembangunan
4. Tambah mana-mana podcast dengan lebih daripada 5 episod.
5. Klik pada CloudIcon

Answer 1

Anda perlu mengimport URL mp3 melalui new Audio(url) 而不是 XMLHttpRequest untuk mengelakkan CORS. Contohnya:

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