Posted at

クロスドメインのAjax通信でcookieがうまくセットされない問題

More than 3 years have passed since last update.


概要

タイトルの通り、クロスドメインでajax通信でcookieを使うときに、ちょっとハマったのでメモしておきます。

クライアント側とサーバ側に設定が必要なので、ちょっとめんどくさいです。


クライアント側

次のサンプルのように、withCredentialstrueにセットしないと、cookieがうまく送受信できません。

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/withCredentials


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

よく使われているライブラリでは、このオプションを設定できるようになってるはずなので、確認してみてください。

eg. jQueryの場合


// ref: http://api.jquery.com/jquery.ajax/
$.ajax({
url: a_cross_domain_url,
xhrFields: {
withCredentials: true
}
});


サーバ側

サーバ側にはヘッダーに情報を追加しないとうまくいきません。

追加する情報は次の2つです。


Access-Control-Allow-Origin

このパラメータにクライアント側のオリジンを指定します。

オリジンはhttp://example.com:3000のように、ポート番号まで一致してないと、うまくいかないと思います。

ローカル環境を構築して検証する際には注意が必要かもしれません。

Access-Control-Allow-Origin:{origin-is-here}

ワイルドカードを指定するとうまくいかないようですが、apacheなどの設定で、ワイルドカードに似たような効果を作れるようです。

http://blog.applest.net/article/20131219-access-control-allow-origin-multiple/


Access-Control-Allow-Credentials

これはクライアント側で書いたものと対応しているもののようです。

値をtrueにしないと受け入れができないようですね。

Access-Control-Allow-Credentials:true


まとめ

クライアント側ではwithCredentialsオプションをtrueにして送信する。

サーバ側はヘッダーにAccess-Control-Allow-Originを正しくセットするのとAccess-Control-Allow-Credentialstrueにする。