[最終更新] 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 日本語リファレンス
関連記事
aws の記事
- [2018年7月27日] 既存システムにAWSのLambdaで作ったREST APIの認可で手こずる
- [2018年7月24日] S3で特定のバケットを誰でも読み取りできるようにするバケットポリシー
- [2018年7月20日] simpleMicroServiceRoleでDynamoDBをqueryする権限を与える
- [2018年7月12日] AWS Lambda + API Gateway で/hoge/{group}/{user}のように階層構造のREST APIでパスパラメータの受け渡し
- [2018年7月9日] AWS Lambda + API Gateway でREST APIを作成し、値を渡してDynamoDBに書き込んでついでに返り値を得るサンプル
- ---本記事---
- [2018年6月19日] AWSのELBでセッション維持の設定(スティッキーセッション)
- [2018年5月31日] MySQLクライアントでAWSのRDSに接続
- [2018年5月21日] pythonのmysqlclientでSSH越しにAWSのRDSにアクセス
- [2017年12月27日] 初心者がAWSでとりあえず最初にWebサーバー立ち上げるまで
スポンサーリンク