XMLHttpRequest cannot load エラーの対処法

この記事について

つまずきポイント要約

• サブドメインでもオリジンが違えば CORS でブロックされる

事象

jqueryでajaxを利用すると、コンソールにエラーが出た

実行したjquery

$.post(
	//アクセスするURL
	'http://sub.exemple.com',
	{
	'value': value
	},
	function(data){
	//リクエスト成功時の処理
});

コンソールに出たエラー

XMLHttpRequest cannot load http://sub.exemple.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://exemple.com' is therefore not allowed access.

リクエスト成功時に実行される処理も行われない。

対処：Access-Control-Allow-Origin を返す

解決方法は、http://sub.exemple.com にAccess-Control-Allow-Origin レスポンスヘッダを追加する。

ワイルドカードですべてのドメインからの接続を許可

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

特定のドメインからの接続のみを許可する場合

header("Access-Control-Allow-Origin: http://exemple.com");

.htaccessに書き込むなら

Header append Access-Control-Allow-Origin: *