.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>