こんばんは、本日はajaxを使ったクロスドメイン通信について勉強しました。
自分自身まだまだ勉強不足のところがあり、実際に何が起こっているのかよくわからないので覚書のような形で記録しておきたいと思います、
ajaxを使ったクロスドメイン通信の必要性
アプリなどを作っていると、ウェブ上から情報を読み込みたくなるときがあります。
このときそのまま、他のサーバーにあるサイトから情報を読み込もうとするとクロスドメイン制限というものに引っかかってしまい、読み込むことができません。
だから、クロスドメイン制限を突破するために色々なことををやる必要があったのですね。
クロスドメインでajax通信をする方法
クロスドメインでajax通信をする方法については以下の２つがあるらしいです。
- jsonp
２. PHP
最初はxdomainajax.jsというものを使ってやろうとしていたのですが、Yahoo Query Language（YQL）というサービスが終了しているため使えないらしいということがわかりました。
そのため、今回は後者のPHPを使ってクロスドメインでの通信を行いました。
用意したもの
まずは、jqueryを用意しました。jqueryとはjavascriptのライブラリのようなものです。
次に、クロスドメインでajax通信を行うためには、どうやらクライアントとサーバに２つの場所にコードを置く必要があるそうです。
クライアントとサーバが何なのかいまいちわからないのですが…
取り敢えず、今回の環境として、サーバ側としてwoedpressを、クライアント側としてhtmlファイルに対して以下のコードを記述しました。
クライアント側のコード
以下のコードを追記（私はionicでスマホ用アプリを開発していたため、index.htmlに記述）します。
<head>
<!-- Ajax通信用 -->
<script type="text/javascript" src="/assets/plugin/jquery-3.4.1.min.js"></script>
<!-- データ通信用 -->
<script>
$(document).ready(function(){
var url = encodeURIComponent("http://｛読み込みたいサイトのurl｝");
$.ajax({
type: "GET",
url:"http://{wordpressのアドレス}.local/wp-admin/ajax.php?url="+url,
dataType: "text",
crossDomain: true,
success: function(res){
content = $(res.responseText).text();
// 取得した内容をコンソールにテキスト形式で出力
console.log(res);
}
});
});
</script>
</head>
サーバ側のコード
以下のコード記述したphpプログラム***ajax.phpをwordpressの適切なディレクトリ（参照パス：vccs/wordpress/wp-admin/ajax.php）に配置。
<?php
if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
echo file_get_contents($_GET["url"]);
}else{
echo "error";
}
?>
参考文献
今回参考にしたサイトは以下の通りです。
引用
