happiness (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) happiness

トップ > 【googleChrome】No 'Access-Control-Allow-Origin' header is present on the requested resourceと言われたときの参考情報

【googleChrome】No 'Access-Control-Allow-Origin' header is present on the requested resourceと言われたときの参考情報

発端

動画をキャプチャして、canvas要素に描画し、それをtoBlobなどしようとしたときに以下のエラーが発生した。

Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

これ自体は、videoタグの属性をsameOrigin="anonymous"にすることで、解決。

本題

次に、videoタグに先程のsameOriginノ設定をすると、下記のようなエラーになった

Failed to load https://something.com/sample.mp4' to 'data:text;charset=utf-8,' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access.)

普通にありえる原因

somthing.comのサーバー側からのレスポンスのヘッダーに以下を仕込んでいないから。 Access-Control-Allow-Origin: *(上記ケースの場合、*はlocalhost:3000とかでもいい)

参考: 画像とキャンバスをオリジン間で利用できるようにする - HTML: HyperText Markup Language | MDN

詳細: オリジン間リソース共有 (CORS) - HTTP | MDN

しかしながら、自分の環境の場合、動画置いているサーバー側の設定は、Access-Control-Allow-Origin: *になっているようだった(たぶん)

それでもエラーが解消されない場合

今回の自分の環境(google chrome 86.0.4240.193)では解消されなかったので、以下、対処策

  1. chrome以外のブラウザ使う)firefox
  2. mp4ではなく、hls(httpLiveStreaming)用のファイル使う
  3. 拡張機能で防ぐ
  4. Allow CORS: Access-Control-Allow-Origin - Chrome ウェブストア
  5. Cross Domain - CORS - Chrome ウェブストア

感想

もっとブラウザ詳しくなりたいです