クロスドメインのJSの利用とAjax通信の整理
jsonpとかcors設定とか、どういうときに必要か良く分からなくなったので整理。
①シンプルに別のドメインに配置されているJSファイルを読む。
これはどのブラウザでも問題なし。外部JSのfunctionをローカルで実施することも可能。みんな普通にやっている奴。
②別ドメインにAjaxリクエストをする。
この場合が注意が必要で、基本はエラーとなってしまう。
apacheの設定か、jsonpで回避する。
apache設定例
リクエストを受ける側のサーバーに以下の設定を行う。.htaccessでもOK
1 2 3 4 5 6 |
【リクエストを受ける側】 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の場合条件分岐した例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
(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ではないよ。)
・戻ってきた時にスクリプトは実行される。
別ドメインでもスクリプトのプロパティとしてのファイルは取得できるので、それを応用した形。
良くある外部サービスのタグで以下のような形のやつがそれ。
1 2 3 4 5 6 7 8 9 |
// コールバック 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); |
考えた人すげーなー
参考リンク
■CORS参考リンク
https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control
関連記事
-
-
[js][GoogleAnalytics]GoogleAnalyticsのデフォルトのスクリプトについて調査
googleAnalyticsで貼り付けるスクリプトの中身ってなにやっているの& …
-
-
メモ_gushから_スクロールに応じてHTML部品の表示 右下前に固定表示
要は最初は要素は固定で右下に表示 固定は下記で実施。 position: fix …
-
-
【ギブアップ】CentOS+casper.jsでキャプチャを取ると日本語が化けて「□」になる。
=== 追記 === casperjs、phantomjsじゃないけど、wkht …
-
-
[js] chart.jsのグラフをwkhtmltopdfでpdfに保存する
表題のことをしたいとなった。 結論目的は果たされたのだけどハマリポ …
-
-
【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (4) Casper動くもGoogleトレンドのバグ?にはまる
casperjsで値を取るため 念のためもう一回埋め込み用のタグからURLを確認 …