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

[最終更新] 2018年7月4日

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の略。

で、以下のようにする。

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

参考リンク

ありがとうございました。

• amazon web services – S3 – Access-Control-Allow-Origin Header – Stack Overflow
• AjaxでAccess-Control-Allow-Originのエラーを回避する方法
• 重要！ まずは「オリジン」を理解しよう (1/2)：HTML5時代の「新しいセキュリティ・エチケット」（1） – ＠IT
• 社内勉強会でSOP (Same Origin Policy) の話をしました
• jQuery.getJSON( url, data, callback ) – jQuery 日本語リファレンス

関連記事

スポンサーリンク