Ajaxには欠かせない、XMLHttpRequest。最近こいつが使いにくくなってます。
var XHR = new XMLHttpRequest();
query = "http://www.muratayusuke.com/";
XHR.open("GET",query,true);
XHR.onreadystatechange = function(){
if (XHR.readyState == 4 && XHR.status == 200){
alert("hoge");
}
};
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で取れないのです。
最近作ってるChrome拡張とかまんなかSearchとかはAjaxしまくりで影響受けまくりだったので、なんとか回避策を練らないといけませんでした。
そこで、やや強引ですが、Access-Control-Allow-Origin ヘッダーをつけた自前のPHPを一枚噛ますことにしました。こんな感じ。
var XHR = new XMLHttpRequest();
query = "./getmurata.php?url=http://www.muratayusuke.com/";
XHR.open("GET",query,true);
XHR.onreadystatechange = function(){
if (XHR.readyState == 4 && XHR.status == 200){
console.log(XHR.responseText);
}
};
XHR.send(null);
/*getmurata.php*/
require_once("dataget.php");
$data = data_get($GET['url']);
header("Access-Control-Allow-Origin: *");
print $data;
dataget.phpの中身はこちら。PHPでソケット通信して丸々結果を取ってくるfunctionが入ってます。それがdata_get()。HTTP通信が一回増えるので単純に考えて約二倍の時間がかかりますが、とりあえずこれでどんなサイトでもAjaxで取ってこれます。
あと最近知ったjQueryの$.getを使うともっとjavascriptの部分がすっきりします。
query = "./getmurata.php?url=http://www.muratayusuke.com/";
$.get(query,function(data){
console.log(data);
});
お試しあれ。