クロスドメインのJSの利用とAjax通信の整理

2017/10/10

jsonpとかcors設定とか、どういうときに必要か良く分からなくなったので整理。

①シンプルに別のドメインに配置されているJSファイルを読む。

これはどのブラウザでも問題なし。外部JSのfunctionをローカルで実施することも可能。みんな普通にやっている奴。

②別ドメインにAjaxリクエストをする。

この場合が注意が必要で、基本はエラーとなってしまう。

apacheの設定か、jsonpで回避する。

apache設定例

リクエストを受ける側のサーバーに以下の設定を行う。.htaccessでもOK

【リクエストを受ける側】
SetEnvIf Origin "^https?://(medical-tribune\.co\.jp)$" ORIGIN=$0 #許可ドメインhttps
SetEnvIf Origin "^http?://(medical-tribune\.co\.jp)$" ORIGIN=$0  #許可ドメインhttp
Header append Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
Header append Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
Header set Access-Control-Allow-Credentials true #BASIC認証付き,cookie送信が必要な場合

【リクエストを受ける側】

SetEnvIf Origin "^https?://(medical-tribune\.co\.jp)$" ORIGIN=$0 #許可ドメインhttps

SetEnvIf Origin "^http?://(medical-tribune\.co\.jp)$" ORIGIN=$0 #許可ドメインhttp

Header append Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN

Header append Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

Header set Access-Control-Allow-Credentials true #BASIC認証付き,cookie送信が必要な場合

これでIE11,chrome,firefoxはOK。

古いIEの場合はこの設定では回避できないので、XDomainRequestを利用してリクエストすることになる。

以下 IEの場合条件分岐した例

(function(){
    //IE判定用処理
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    if(msie > 0){
        //IEだったら
        var xdr = new XDomainRequest();
        xdr.onload = function(){
            console.log("dr.responseText");
        };
        xdr.onerror = function(){
            console.log("error");
        };
        xdr.onprogress = function(){};
        xdr.open('GET', '//medical-tribune.tokyo/nakamura_test/test.html');
        xdr.send();

     }else{

        //IE以外
        $.ajax({
            type: 'GET',
            url: 'アクセス先URL',
            dataType: 'text',
            success: function(response){

                console.log( response );
            },
            error: function(response){
                console.log("error");
            }
        });
     }

})();

(function(){

//IE判定用処理

var ua = window.navigator.userAgent;

var msie = ua.indexOf("MSIE ");

if(msie > 0){

//IEだったら

var xdr = new XDomainRequest();

xdr.onload = function(){

console.log("dr.responseText");

};

xdr.onerror = function(){

console.log("error");

};

xdr.onprogress = function(){};

xdr.open('GET', '//medical-tribune.tokyo/nakamura_test/test.html');

xdr.send();

}else{

//IE以外

$.ajax({

type: 'GET',

url: 'アクセス先URL',

dataType: 'text',

success: function(response){

console.log( response );

error: function(response){

console.log("error");

}

});

}

})();

JSONPについて

以下のリンクが分かりやすかった

https://qiita.com/stkdev/items/f3e6cae58ab73faee502

http://tsujimotter.info/2013/01/03/

おおよその流れとして、、

・予めコールバック関数(ajaxのデータを受け取ってから動かす関数)を用意しておいて、scriptタグのsrcにリクエスト先ファイルを設定し、そのパラメータにコールバック関数名を渡しておく。
・被リクエスト側はそのコールバック関数名にデータを入れた形式で「スクリプトとして返却する」(headerの出力に注意。Jsonではないよ。)
・戻ってきた時にスクリプトは実行される。
別ドメインでもスクリプトのプロパティとしてのファイルは取得できるので、それを応用した形。
良くある外部サービスのタグで以下のような形のやつがそれ。

// コールバック
var hoge = function(data) {
 //コールバック実行部
}
 
/*scriptタグの挿入*/
var script = document.createElement('script');
script.src = 'http://hoge.com/test.cgi?callback=hoge'; //被リクエスト側はhoge(json)という"スクリプト"を返すように作っておく。
document.head.appendChild(script);