【ajax】別ドメインへPOST送信してデータを受け取る方法

公開日：2015/05/10

更新日：2017/05/13

カテゴリー: Ajax

これまで同一ドメインの中で「post-send.html」からajax送信で「post-receive.php」にデータをPOSTしてその結果（データ）を受け取っていたのですが、別ドメインに「post-receive.php」を設置して同じようにajax送信したらうまく動きませんでした。

「post-receive.php」を別ドメインに移動させただけでプログラムの記述は全く変更していないのになぜ？

と疑問になったのですが、その理由がわかりました。

ajaxの別ドメインへのデータ送信は許可されていない

これまで同一ドメインの中でajaxを使ってゴニョゴニョしていたので全く知らなかったのですが、ajaxの別ドメインへのデータ送信（クロスドメインへのアクセス）は許可されていないようです。

なのでプログラムの記述を変更していなくても、ajax送信そのものが許可されていないのでプログラムが動かなかったのです。

別ドメインにajax通信しようとすると、Firefoxの場合では、

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://tool.ysklog.net/post-receive2.php. にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。

GoogleChromeの場合だと、このようになります。

XMLHttpRequest cannot load http://tool.ysklog.net/post-receive2.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://ysklog.net' is therefore not allowed access. The response had HTTP status code 500.

別ドメイン側でajax送信を許可する

「ajaxの別ドメインへのデータ送信は許可されていない」「じゃあどうすればいいの？」となりますが、方法は簡単で別ドメインに設置した「post-receive.php」に以下のヘッダー情報を追記してあげればOKです。

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

これで別ドメインからのajax送信を許可できます。

なお、「*」は「すべてのドメインからのajax送信を許可」を意味するので、ドメインを指定したい場合は次のようにします。

header('Access-Control-Allow-Origin: http://ysklog.net');

では、以下に詳細な説明を行いたいと思います。

別ドメインへのajaxでPOST送信する方法

まずは失敗したパターンです。

「post-send.html」の内容

「post-send.html」（http://ysklog.netに設置）には

キー「post_data_1」　データ「hoge」
キー「post_data_2」　データ「piyo」

を別ドメイン（サブドメイン）の「http://tool.ysklog.net/post-receive.php」にPOST送信するスクリプトを次のように記述しました。

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

「post-receive.php」の内容

「post-receive.php」（http://tool.ysklog.netに設置）には次のコードを記述し、送信されてきたPOSTデータを取得し、それをそのまま返してあげます。

<?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');

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

そして「post-send.html」にアクセスしてデータを「post-receive.php」にPOST送信しようとしたところ失敗し、コンソールを確認すると以下のエラーが吐き出されていました。

XMLHttpRequest cannot load http://tool.ysklog.net/post-receive.php.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://ysklog.net' is therefore not allowed access.

以下訳

XMLHttpRequestは「http://tool.ysklog.net/post-receive.php」をロードすることはできない。
'Access-Control-Allow-Origin'ヘッダーが要求されたリソース上に存在しない。
それゆえにオリジン「http://ysklog.net 」からのアクセスは許可されていない。
※オリジンとはプロトコル、ドメイン、ポートの3つを合わせた情報のこと

ということで、上述したように「post-receive.php」に以下を記述して別ドメイン（ここではhttp://ysklog.net ）からのajax送信（XMLHttpRequest）を許可してあげる必要があります。

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

「post-receive.php」の内容を変更

「post-receive.php」の内容を次のように変更しました（11行目を追記）。

<?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);
?>

そしたら次のように別ドメインへのajax送信がうまくいきました。