新ConoHaのオブジェクトストレージ上のデータをAjaxで取得してみる

新ConoHaのオブジェクトストレージネタ、まだまだ続きます。
前回の記事（新ConoHaのオブジェクトストレージにWeb公開可能なコンテナを作成する。）ではオブジェクトストレージにアップロードしたファイルにブラウザから直接アクセスできるようになりました。

今回は同じファイルをAjax(XmlHttpRequest)を使って取得してみます。

クロスドメインリクエストの制限

Ajaxで別ドメインのデータを取得しようとすると制限にひっかかります。
参考：Ajax クロスドメインリクエスト 制約
CORSってのを使うと上記制限を回避できるそうなので試してみます。

CORS(Cross-Origin Resource Sharing)

まだよくわかってませんがXHR(XmlHttpRequest)のクロスドメイン制約を回避する方法らしいです。
新ConoHaのオブジェクトストレージはOpenStackSwiftで実現してるらしくCORSの設定が可能みたい。

参考：CORS

この制限を超えてファイルアップロードするのが目標ですがまずはGetだけできることを確認します。

サイトの用意

参考サイトに書かれた通りのHTMLを出力するページを用意しました。(Rails)

XHRサンプルフォーム

このサイト(http://localhost:3000)からオブジェクトストレージ(https://object-storage.tyo1.conoha.io/)のファイルをAjaxで取得するにはクロスドメイン制約を抜ける必要があります。

取得してみる

前回の記事で用意したコンテナ(X-Container-Read = .r:* を設定したもの)はこんな感じ。

コンテナのメタデータ

通信内容を確認したいのでChromeのDeveloperToolを開き、Networkタブを表示しておく。
※"DisableCache"にチェックを入れておいたほうがいいと思う。これで結構悩んだ。

ChromeのDeveloperTool

CyberDuckでhello.txtのURLをコピーし、フォームに入力してSubmit。

取得（失敗）

DeveloperTool上はステータスコード200が帰ってきてるみたいだけど画面上にはstatus:0が出たまま。
参考サイトによると何かがおかしいらしい。

参考サイトより：Assuming the request succeeds you should see the response header and body. If something went wrong the response status will be 0.

というかオブジェクトストレージ側に何も設定してないんだから取れたら逆に怖い。

コンテナにCORS用のメタタグを設定

コンテナに下記メタタグを設定する。

X-Container-Meta-Access-Control-Allow-Origin: http://localhost:3000

ちなみにCyberDuckでメタタグを編集できた。Swiftクライアントいらなかったんじゃ？

CyberDuckでメタタグ編集

再度取得してみる。

再取得（成功）

とれた。
Responseに”Access-Control-Allow-Origin:http://localhost:3000”が含まれるようになり、ファイルの内容も取得できてるのがわかる。

まとめ

オブジェクトストレージのファイルをAjax(XmlHttpRequest)を使って取得するには下記設定が必要だった。

• コンテナにX-Container-Readメタデータを設定する。
• コンテナにX-Container-Meta-Access-Control-Allow-Originメタデータを設定する。

X-Auth-Token is 何？

参考サイトを忠実にやってたんだけど結局X-Auth-Tokenは設定しなくても動いた。
X-Auth-Tokenとはなんなんだろうか・・・
今回はX-Container-Readで誰でも閲覧可能になってるからいらなかったんだろうか。
最終的にはAjaxを使ったファイルアップロードまで実装したいのでそこらへん知る必要があるのかもしれない。

だれか詳しい人教えてください。

さて次に試すのはAjaxによるアップロードかな。

関連記事

ConoHa関連の記事をまとめました。
ConoHa関連まとめ