CORSでハマったこと

.htaccessに

Header append Access-Control-Allow-Origin: "*"

を追加で、クロスドメインのリソースを使えるようになるけど、「Same-Origin Policy」という制限があるのに気づくまで、かなり試行錯誤してました。
つまり、ポリシー発行元が同じだと、CORS設定しても失敗しますってことらしい。

例えばMAMPなどで、ローカルの
http://abc:8888/
から
http://abc:9999/
にあるXMLなどを読み込もうとしたら、上手く行きません。

レンタルサーバーでもマルチドメイン管理のところだと、同じレンタルサーバーのポリシー発行になって、上手く行きませんでした。
発行元が別々のサーバーで、利用する目的に限られそうです。

参考サイト
http://hakuhin.jp/js/resource_sharing.html

サンプルで作ったものを載せておきます。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var ua = window.navigator.userAgent.toLowerCase();
var isIElte9 = ua.match(/msie [8.]/i) || ua.match(/msie [9.]/i);
var uri = 'http://クロスドメイン/test.xml';

if (isIElte9) {// ie8,9
	var xdr = new XDomainRequest();
	xdr.onerror = function() {
		alert('error');
	}
	xdr.onload = function() {
		//alert(xdr.contentType);
		//alert(xdr.responseText);
		setList($.parseXML(xdr.responseText));
	}
	xdr.open('get', uri);
	xdr.send(null);
} else {
	var xhr = $.ajax({
		type: "GET",
		url: uri,
		dataType: "xml",
		//xhrFields: { withCredentials: true },
		crossDomain: true
	}).done(function(xml) {
		setList(xml);
	}).fail(function(jqXHR, textStatus, errorThrown) {
		//console.log(jqXHR);
		//console.log(textStatus);
		//console.log(errorThrown);
	});
}

function setList(xml) {
	var html = '<ol>';
	
	$(xml).find('item').each(function() {
		var t = $(this).find('title').text();
		html += '<li>' + t + '</li>';
	});
	
	html += '</ol>';
	
	$('body').append(html);
}
</script>
</head>
<body></body>
</html>

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル