AWSのS3上にjsonファイルを置いて、サーバーからjQuery.getJSONで読み込みに行ったところ、怒られた。セキュリティ上の問題から、クロスドメインを許さない、Same-Origin Policyのため。S3側で対応が必要。
以下、メモ。
状況
AWSのS3上にjsonファイルを置いた。EC2インスタンスから、jQuery.getJSONでjsonファイルを読み込もうとした。
が、失敗。Chromeのデベロッパーツールのコンソールを見てみると、以下のようなエラー。
No ‘Access-Control-Allow-Origin’ header is present on the requested resource
なんだろう。
原因
Same-Origin Policyと呼ばれるルールに違反しているため。Originとは、プロトコル(httpsとか)、ホスト名(example.comとか)、ポート番号(80とか)のことで、これが違うところへのアクセスには制限がかかる。不便だなぁと思ったけれど、そうしないと、JavaScriptでやりたい放題だもんね。。
したがって、jQuery.getJSONに限らず、このエラーはWebの世界では何かと起きる。
対応
これに対応するには、相手側(今回で言うと、S3側)での設定が必要(内部的には、Access-Control-Allow-Originというヘッダーに、許可するホスト名を入れる)。具体的には、AWSのコンソールより、S3の対象のバケットのアクセス権限→CORSの設定で設定をいじる。CORSとはCross-Origin Resource Sharingの略。

CORSの設定
で、以下のようにする。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
最初のCORSConfigurationのところが変わる。リンク先を見てみると、何かアクセス制御っぽいことをしている。
これを保存すると、jsonファイルが取れるようになる。
参考リンク
ありがとうございました。
コメント