【ajax】別ドメインにアクセスしてセッションを扱う方法

公開日：2015/09/06

更新日：2017/05/13

カテゴリー: Ajax

ajaxで別ドメインにアクセスしてセッションを扱いたかったのですが、なかなかうまくできずかなり苦労しました。

最終的にはできるようになったので、試行錯誤と結果をまとめておきたいと思います。

ajaxで別ドメインにアクセスする方法

まずajaxでは別ドメインにアクセスすることは禁止されています（クロスドメインでのアクセスは禁止されている）。

しかしajaxでアクセスするページのヘッダー情報に

header("Access-Control-Allow-Origin: *");

を追加することで別ドメインへのajaxでのアクセスが可能になります。

PHPでは次のようにします

<?php
//ajax送信でPOSTされたデータを受け取る
$post_data_1 = $_POST['post_data_1'];
$post_data_2 = $_POST['post_data_2'];

//受け取ったデータを配列に格納
$return_array = array($post_data_1, $post_data_2);

//ヘッダーの設定
header("Content-type:application/json; charset=utf8");
header("Access-Control-Allow-Origin: *");

//「$return_array」をjson_encodeして出力
echo json_encode($return_array);
?>

これで別ドメイン（上ではサブドメインであるhttp://tool.ysklog.net/post-receive.php）にデータを送信（POSTもGETもOK）できるようになります。

詳しくは【ajax】別ドメインへPOST送信してデータを受け取る方法を参照して下さい。

ajaxで別ドメインにアクセスしてセッションを扱う

ヘッダー「header("Access-Control-Allow-Origin: *");」の設定でajaxでの別ドメインへのアクセスはできるようになりました。

ではajaxで別ドメインにアクセスしてセッションを扱ってみたいと思います。

送信側「post-send.html」の内容

具体的には、ajaxで

キー：password　データ：9999

を別ドメイン（http://tool.ysklog.net/post-receive.php）にPOST送信して、その文字列をセッションに格納してさらにそれを受け取りたいと思います。

jQuery(function($){
    //ajax送信
    $.ajax({
        url : "http://tool.ysklog.net/post-receive.php",
        type : "POST",
        data : {password:"9999"},
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("ajax通信に失敗しました");
        },
        success : function(response) {
            console.log("ajax通信に成功しました");
            console.log(response);
        }
    });
});

受信側「post-receive.php」の内容

ajaxで送信されてきたPOSTデータを受け取り、そのデータをセッション「$_SESSION['password']」に格納して、このセッション情報を呼び出し元であるajaxに返したいと思います。

<?php
//セッションスタート
session_start();

//ajax送信でPOSTされたデータを受け取る
$password = $_POST['password'];

//セッション「$_SESSION['password']」に「$password」を格納する
$_SESSION['password'] = $password;

//ヘッダーの設定
header('Content-type:application/json; charset=utf8');
header("Access-Control-Allow-Origin: *");

//「セッション「$_SESSION['password']」をjson_encodeして出力
echo json_encode($_SESSION['password']);
?>

このように「post-send.html」からajax送信し、「post-receive.php」でデータを受け取る・・・というプログラムを実際に実行すると、以下のような結果となります。

ajax通信に成功しました
null

ajax送信は成功してるのにデータが帰ってきてない！？

「ajax送信は成功しているのに何でデータが帰ってきてないの？」「簡単なプログラムだからミスはなさそう」と悩んだのですが、いろいろと検索した結果

ajaxのクロスドメインへのアクセスではセッションの処理（クッキーの送信）は通常禁止されている

ことがわかりました。

さらにその対処法を調べた結果、

ajaxで別ドメインにアクセスしてセッションを扱う場合、
ajax送信の組立部分に「xhrFields : {withCredentials: true}」を追加し
セッションを扱うPHP側のヘッダーに「header('Access-Control-Allow-Credentials: true');」を追加するとよい

ことがわかりました。

ajaxで別ドメインにアクセスしてセッションを扱う方法

ということで、次のようにしました。

送信側「post-send.html」の内容

jQuery(function($){
    //ajax送信
    $.ajax({
        url : "http://tool.ysklog.net/post-receive.php",
        type : "POST",
        data : {password:"9999"},
        xhrFields : {withCredentials: true},
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("ajax通信に失敗しました");
        },
        success : function(response) {
            console.log("ajax通信に成功しました");
            console.log(response);
        }
    });
});

受信側「post-receive.php」の内容

<?php
//セッションスタート
session_start();

//ajax送信でPOSTされたデータを受け取る
$password = $_POST['password'];

//セッション「$_SESSION['password']」に「$password」を格納する
$_SESSION['password'] = $password;

//ヘッダーの設定
header('Content-type:application/json; charset=utf8');
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');

//「セッション「$_SESSION['password']」をjson_encodeして出力
echo json_encode($_SESSION['password']);
?>

「これでできるだろ」と思ったのですが、結果はこのようになりました。

ajax通信に失敗しました

次はajax送信そのものが失敗しました。

しかしコンソールの情報に大ヒントが提示されていました。

XMLHttpRequest cannot load http://tool.ysklog.net/post-receive2.php.
A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://ysklog.net' is therefore not allowed access.

以下訳

XMLHttpRequestは「http://tool.ysklog.net/post-receive.php」をロードできなかった。
「credentials flag」を有効にした場合、「Access-Control-Allow-Origin」ヘッダーにはワイルドカード「*」は使用できない。
そのためオリジン「http://ysklog.net」はアクセスが許可されなかった。
※オリジンとはプロトコル、ドメイン、ポートの3つを合わせた情報のこと

ということで、受信側「post-receive.php」の内容を最終的に次のようにしたらajaxで別ドメインにアクセスしてセッションを扱うことができるようになりました。

<?php
//セッションスタート
session_start();

//ajax送信でPOSTされたデータを受け取る
$password = $_POST['password'];

//セッション「$_SESSION['password']」に「$password」を格納する
$_SESSION['password'] = $password;

//ヘッダーの設定
header('Content-type:application/json; charset=utf8');
header("Access-Control-Allow-Origin: http://ysklog.net");
header('Access-Control-Allow-Credentials: true');

//「セッション「$_SESSION['password']」をjson_encodeして出力
echo json_encode($_SESSION['password']);
?>

確認のために結果を記述しておくと、