CORSのない角オーディオ再生

Question

特に、オーディオファイルを再生するために想定されているAngular4を使ってwebappを構築しています。残念ながら私は、メディアファイルを提供するサーバーを制御できないため、サーバー設定を変更することはできません。私は今、オーディオ要素を作成し、それを直接再生すると

は、オーディオの再生が期待通りに動作します：

var audio = new Audio(); 
audio.src = item.url; // the item is simply an object that holds the url and title 
audio.load(); 
audio.play(); 

私は今、私は以来、CORSのエラーを取得する再生機能をカプセル化するプレイヤークラスを使用する場合

：

@Injectable 
export class Player { 
audio: any; 

constructor(private zone: NgZone){ 
    this.initialize(); 
} 

initialize(){ 
    if (!this.audio) { 
     this.audio = new Audio(); 
     this.audio.autoplay.false; 
     this.audio.preload = 'auto'; 
     this.audio.autobuffer = true; 
     this.audio.crossOrigin = "anonymous"; 
    } 
} 

setUrl(url: string) { 
    this.initialize(); 
    this.audio.pause(); 
    this.audio.src = url; 
    this.audio.load(); 
} 

play() { 
    this.audio.play(); 
} 

pause() { 
    this.audio.pause(); 
} 

} 

プレイ時に返されるエラーメッセージは、本質的にCORSポリシーが再生されてからアイテムを防止することをinidactes以下、である：mp3項目がappropiateヘッダが設定されていません。

Uncaught (in promise) DOMException: Failed to load because no supported source was found. 

これを回避する方法はありますか？そして、コントローラで直接オーディオ要素を呼び出すと、なぜそれは機能しますか？

Answer 1

基本的にCORSは、AJAXリクエストを使用してクロスソースコンテンツを読み込んだり取得したりすることを防ぐウェブブラウザの制限であり、サーバーサイドのソリューションを使用してmp3を読み込んでストリームすることができます。

回避策は、たとえば、CORSの制限なしにmp3ストリームを中継するプロキシサーバーを開発することです。たとえば、NodeJSを使用してこれを達成できます。

あなたはCORSどこでもパッケージに使用してプロキシを作成することができます https://www.npmjs.com/package/cors-anywhere

か、また、カスタムプロキシを開発することができますし、CORSミドルウェアを使用する： https://github.com/expressjs/cors

だから、この問題を回避するには、のように見えるはずです。

┌─────────────────┐  ┌───────────────────────┐  ┌────────────┐ 
│ MP3 HOSTING │  │  YOUR PROXY  │  │   │ 
│(CORS LIMITATION)│───▶ │ (NO CORS LIMITATION) │────▶ │Your WebAPP │ 
│     │  │      │  │   │ 
└─────────────────┘  └───────────────────────┘  └────────────┘ 

最初の例がうまくいかなかった理由は、ブラウザが「w CORSポリシーは無視されます（詳細はhttps://stackoverflow.com/a/41308074/1641558を参照してください）。