通信相手
まず、肝は“Access-Control-Allow-Origin”。
jsからアクセスする対象のコンテンツがクロスドメインアクセス許可をしていないといけない。
レスポンスヘッダーに存在すればよいということで、
PHPだと、こんな感じで書く(らしい)
<?php header("Access-Control-Allow-Origin: *"); |
通信モジュール
近代的なブラウザはJQueryのajaxでそのまま通信できるが、やっぱり彼は…
IE 対応 – XDomainRequest
JQueryのajax等でクロスドメイン通信を行う場合は、xdr.jsを呼んでおくと、
IE8以上(?)のブラウザはXDomainRequest(IE用のクロスドメイン通信モジュールのようなもの)が自動で使用される。
xdr.js
宣言例
<script src="./js/jquery.min.js"></script> <script src="./js/xdr.js"></script> |
Modした方の記事↓
IE9のXDomainRequestでCORSするときにjQuery.noop使うと通信中断するバグ – classmethod
XDomainRequestの注意点はこの辺↓が読みやすかった(英語)。
http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx
特に気になったのは、
7. Requests must be targeted to the same scheme as the hosting page
http同士、https同士でないとアクセスができないという点。
他の近代的なブラウザはスキームがクロスしていても動いた。(http→https→http, https→http→https)
その他
文字コード – charset
で、さらにサーバがEUCだったりすると、また厄介ですが、
アクセス相手が管理下にある場合は、charsetを書いてあげたらいいんでないかと。
呼び出し先
<?php header("Access-Control-Allow-Origin: *"); header("Content-type: text/plain; charset=euc-jp"); define('Charset', 'EUC-JP'); print 'ここの文字列が返ります'; |
呼び出し元
<script src="./js/jquery.min.js"></script>
<script src="./js/xdr.js"></script>
<script type="text/javascript">
$( function () {
$.ajax({
url: "http://konna-domain.neeyo/text-wo-kaese",
cache: false, // 一応
crossDomain: true, // 不要かも
dataType : 'text' // 条件次第
// ,beforeSend: function ( xhr ) {
// xhr.overrideMimeType("text/plain; charset=euc-jp"); // これをしてもxdrには反映されないので、不十分
// }
})
.done(function(html) { $("#rewritable").html('done'); })
.fail(function(jqXHR, textStatus) { $("#rewritable").html('fail');});
</script>
<div id="rewritable"></div> |
