Access-Control-Allow-Originの罠! Amazon S3にあるファイルをAjaxでアクセスしようとしたら激ハマリした話
タイトルまんまです。
どういうハマリ方をしたかというと、
XMLHttpRequest cannot load (Awsのファイルのパス). Origin null is not allowed by Access-Control-Allow-Origin.
というエラーが出ました。
これを解決しようとしてかなりドハマリした話です。
ちなみに環境は
- Ruby on Rails3.2.13
- JavaScript (jQuery利用)
でした。
前提として
Amazon S3はめちゃくちゃセキュリティが強い!
なのでURLも毎回
S3Object.url_for('ファイルのパス', バケット名)
というように動的に作成する必要があります。ちなみにこれは gem aws-s3を利用しています。
(前回記事参照 Rails 3.2 でAmazon S3を使う方法 - nigoblog)
そこでAjaxでアクセスしたいファイルのURLを生成したのですが、どうしても、
XMLHttpRequest cannot load (Awsのファイルのパス). Origin null is not allowed by Access-Control-Allow-Origin.
と、出てしまう。
rubyでheadersアクセスを色々設定してもダメで万策尽きたころこちらのページを見ました。
Amazon Web Services ブログ: 【AWS発表】Amazon S3 が Cross Origin Resource Sharing (CORS) のサポートを開始!
結論からいうとこのページを見ることで完璧に理解。
S3が強固すぎて、rubyからいくら設定しても無駄だということが判明!
方法としては
- S3コンソールにアクセス
- propertyを開く
- Permissionsを開く
- Edit CORS configurationを開く
- 内容を変更する
という流れで解決出来ます。
詳しく知りたい方は先に紹介したサイトへアクセスするか、
「aws s3 クロスドメイン」
でググるとよいでしょう!
では!