別の Web サイトから MP3 ファイルを再生する際の CORS エラーを修正

Question

私が抱えている問題は、React アプリが他のソースからオーディオを再生できず、CORS エラーが発生することです。 例: https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3

奇妙なことに、https://www.w3schools.com/tags/tag_audio.asp にアクセスすると、上記の URL を入力して [再生] をクリックします。

ローカルの React アプリでは、302 ステータスとリダイレクトが表示されます。 audio タグには、src 要素にcrossOrigin="anonymous" と URL が含まれています。

W3Schools では、どういうわけかリダイレクトされ、リダイレクトされた URL からステータス 206 しか取得できません。

再現方法:

1. git クローン https://github.com/SamTV12345/PodFetch.git
2. 「ビルド」セクションの README 指示に従います
3. git checkout のオリジン/開発
4. 5 エピソードを超えるポッドキャストを追加します。
5. クラウドアイコンをクリックします

Answer 1

CORS を回避するには、XMLHttpRequest ではなく new Audio(url) を介して mp3 URL をインポートする必要があります。例えば：＃＃＃

リーリー リーリー