aws_corsの設定を確かめる - インフラエンジニアの技術ブログ

CORS要点
異なるバケットにあるファイルを閲覧できるようにする

http://cors-test-190302.s3-website-ap-northeast-1.amazonaws.com/load.html

HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザーの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。 bucket-s3-6-190302.s3-website-ap-northeast-1.amazonaws.com

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://cors-test-190302.s3-website-ap-northeast-1.amazonaws.com/load.html にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)

バケットを２つ作成（リージョンは東京）
→オブジェクトは公開可能とする

htmlファイルを3つ
index.html
error.html
test.html

1.
バケット1上にて
→[プロパティ]タブ
→Static website hosting
→[このパケットを使用してウェブサイトをホストする]をチェック
インデックスドキュメント
→index.html
エラードキュメント
→error.html

2.
→[概要]タブ
index.html
error.html
test.html
の3つをアップロード
「このオブジェクトにパブリック読み取りアクセス権限を付与する」
を選択すること

3.
バケット1をクリック
→[プロパティ]タブ
→Static website hosting
→URLがあるのでクリック
→hello.htmlとtest.htmlの内容が表示されることを確認
（hello.htmlはtest.htmlの内容も読み込むように記載済み）

2
2-1
バケット2つ目(バケット2)を作成
アクセス許可の設定
チェックボックス4つをはずす
「このオブジェクトにパブリック読み取りアクセス権限を付与する」

2-2
→[概要]タブ
test.html
をアップロード
「このオブジェクトにパブリック読み取りアクセス権限を付与する」
を選択すること

2-3.
バケット上にて
→[プロパティ]タブ
→Static website hosting
→[このパケットを使用してウェブサイトをホストする]をチェック
インデックスドキュメント
→index.html
エラードキュメント
→error.html２

2-4.
バケット2をクリック
→[プロパティ]タブ
→Static website hosting
→URLがあるのでクリック
→403エラーとなる
→URLに"/test.html"を追記するとtest.htmlが表示→コピーしてテキスト貼り付け

3
3-1.
index.htmlに元から記載
test.html
の文字を2-4でテキストコピーした値に編集して保存(

3-2
バケット1で
index.htmlとtest.htmlを削除
→3-1で編集したindex.htmlをアップロード
「このオブジェクトにパブリック読み取りアクセス権限を付与する」
を選択すること

3-3
バケット1をクリック
→[プロパティ]タブ
→Static website hosting
→URLがあるのでクリック
→index.htmlの編集前の内容が表示
→→ここではパケット2のtest.htmlの内容をみることができない。
→→ここでCORSの設定をしてパケット1からバケット2の内容をみられるようにする

4-1.
バケット2より
[アクセス権限]タブ
→[CORSの設定]
→画面左下[ドキュメント]をクリック
→doc中ほどにあるサンプルのコードをコピー
→CORS構成エディターへ貼り付けで一部編集し、以下のようにする
------
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
------

4-2.
バケット1をクリック
→[プロパティ]タブ
→Static website hosting
→URLの値をコピー
値
http://.s3-website-ap-northeast-1.amazonaws.com

4-3.
4-1のバケット2のCORS構成エディター内の
<AllowedOrigin>と</AllowedOrigin>の間にバケット1のURL内容を追記

------
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://.s3-website-ap-northeast-1.amazonaws.com
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
------

4-4.
バケット1をクリック
→[プロパティ]タブ
→Static website hosting
→URLがあるのでクリック
→index.htmlとバケット2のtest.htmlの内容が表示された。