読者です 読者をやめる 読者になる 読者になる

nigoblog

スタートアップのCMOブログ

Access-Control-Allow-Originの罠! Amazon S3にあるファイルをAjaxでアクセスしようとしたら激ハマリした話

rails webサービス ruby 技術

タイトルまんまです。
どういうハマリ方をしたかというと、

XMLHttpRequest cannot load (Awsのファイルのパス). Origin null is not allowed by Access-Control-Allow-Origin.

というエラーが出ました。
これを解決しようとしてかなりドハマリした話です。

ちなみに環境は

でした。

前提として
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からいくら設定しても無駄だということが判明!

方法としては

  1. S3コンソールにアクセス
  2. propertyを開く
  3. Permissionsを開く
  4. Edit CORS configurationを開く
  5. 内容を変更する

という流れで解決出来ます。

詳しく知りたい方は先に紹介したサイトへアクセスするか、
「aws s3 クロスドメイン」
ググるとよいでしょう!

では!