クロスドメインでAjax、なおかつセッション情報も利用するなら・・・

クロスドメインでAjaxを使うのには、レスポンスヘッダーに

Access-Control-Allow-Origin:http://allowed-origin.test

てな感じで許可をつけてやらねばならないというのは前に書いた。

このオリジンというのはポート番号まででパスは不要、というか、リクエストヘッダーのOriginとして送られてきたものを（許可できるなら）戻すのが本筋のようだ。


で、自分がやりたいのは自サイト内部のHTTPからHTTPSへのクロスなのであり、そんなことをしたい理由はもちろん認証情報の取得だ。つまり、Cookieがいる。

が、クロスサイトなAjaxを上記で許可した場合、通信自体は許可されるが諸々の制限がついていて、Cookie、それからX-の拡張ヘッダ類は送られない。

受け取っていいヘッダを、

Access-Control-Allow-Headers:X-Foo,X-Bar

てな感じで書いてやらねばならない。これがないと、ｊQueryなんかがつけてくれるX-Requested-Withヘッダーなんかもつかない。


Cookieも送りたいので上記にCookieと書けばいいかというと、それではだめで、Cookieを送るには、XMLHttpRequestにwithCredentialプロパティをtrueで設定しないとならない。Cookieは認証に使われるからか、特別扱いなわけかね。

で、これを具体的に行う方法が、たとえばjQueryでは、こうなる。


jqTargetなるjQueryオブジェクトが、取得したコンテンツをロードしたい対象だとしたら、

$.ajax({
url: loadUrl,
xhrFields: {
withCredentials: true
}
}).done(function(data){
jqTarget.html(data);
});

通常なら、jqTarget.load(loadUrl);で終わるところだが。

（オリジンを許可してない場合、どっちにしろつながりもしない。この場合、ChromeのデバッガではOPTIONメソッドの履歴が残り、利用できる応答がないとかそういうことになってる。OPTIONなって使ってねーよ！と思うが、これはプリフライトと呼ばれる、クロスドメインのXMLHttpでのネゴシエート的なものの結果のようだ）




参考：

• https://developer.mozilla.org/ja/docs/HTTP_access_control
• http://dev.classmethod.jp/etc/about-cors/