AWS S3上のjsonファイルをgetJSONしたらNo ‘Access-Control-Allow-Origin’ header is present on the requested resourceと怒られた時の対応

2018年6月28日2023年10月28日

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ファイルが取れるようになる。