1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CloudFrontのCORS対応

Posted at

S3上に存在する動画を再生するアプリを作成中、
MediaConvertを利用して作成したMPEG-DASHが再生できない状況に。

エラーとしてはCORSの問題だったので、はじめはS3のバケットに
CORSの対応を施した。

別途、CloudFrontを利用しての再生においては、
CloudFront自体にもCORSの対応が必要だったのでメモ。

1."CloudFront Distributions"にて対象を選択
2.遷移先にて、"Behaviors">対象behaviorを選択>"Edit"
3."Allowed HTTP Methods"で、"GET,HEAD,OPTIONS"を選択
 ー>これは、PUTなども必要であれば、もう一つの選択肢を選択
4."Cached HTTP Methods"で、"OPTIONS"をチェック
5."Cache Based on Selected Request Headers"で"Whitelist"を選択し、
  "Whitelist Headers"で、"Origin"を Add。

その後アクセスすると、一発目はCORSのエラーが出るが、しばらくすると対象のコンテンツが表示され、
次回以降(キャッシュに存在するあいだ)は、問題なく再生できた。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?