Ajaxには欠かせない、XMLHttpRequest。最近こいつが使いにくくなってます。

1 var XHR = new XMLHttpRequest();
2 query = "http://www.muratayusuke.com/";
3 XHR.open("GET",query,true);
4 XHR.onreadystatechange = function(){
5 	if (XHR.readyState == 4 && XHR.status == 200){
6 		alert("hoge");
7 	}
8 };
9 XHR.send(null);

上記のコードなんかよく見るXMLHttpRequestのコードだと思いますが、最近のChromeでこいつがエラーを吐くようになりました。そう、
"XMLHttpRequest cannot load http://www.muratayusuke.com/. Origin http://muratest is not allowed by Access-Control-Allow-Origin."
ってやつです。要は、ドメインが違うサイトのデータを勝手に取れなくなってしまったのです。Same Origin Policyというらしいです。
これを回避するには、取られる側のサイトにAccess-Control-Allow-Origin ヘッダーというのを足してやらんとだめみたいで、これを設定してないサイトのデータはXMLHttpRequestで取れないのです。

SPONSERD LINK

最近作ってるChrome拡張とかまんなかSearchとかはAjaxしまくりで影響受けまくりだったので、なんとか回避策を練らないといけませんでした。

そこで、やや強引ですが、Access-Control-Allow-Origin ヘッダーをつけた自前のPHPを一枚噛ますことにしました。こんな感じ。

1 var XHR = new XMLHttpRequest();
2 query = "./getmurata.php?url=http://www.muratayusuke.com/";
3 XHR.open("GET",query,true);
4 XHR.onreadystatechange = function(){
5 	if (XHR.readyState == 4 && XHR.status == 200){
6 		console.log(XHR.responseText);
7 	}
8 };
9 XHR.send(null);
1 <?php
2 /*getmurata.php*/
3 require_once("dataget.php");
4 $data = data_get($GET['url']);
5 header("Access-Control-Allow-Origin: *");
6 print $data;

Amazon to Rakutenは機能の特性上どのサイトからもアクセスするのでこうしてますが、必要なドメインが限られている時は*(アスタリスク)にせずに使うドメインだけ記入して制限することをおすすめします

dataget.phpの中身はこちら。PHPでソケット通信して丸々結果を取ってくるfunctionが入ってます。それがdata_get()。HTTP通信が一回増えるので単純に考えて約二倍の時間がかかりますが、とりあえずこれでどんなサイトでもAjaxで取ってこれます。

あと最近知ったjQueryの$.getを使うともっとjavascriptの部分がすっきりします。

1 query = "./getmurata.php?url=http://www.muratayusuke.com/";
2 $.get(query,function(data){
3 	console.log(data);
4 });

お試しあれ。