【JSONとJSONP】Ajaxで CORS policyにひっかかってデータ取得できない時【JavaScript】

APIでデータ取得！簡単やん！？
CORS Policy？　同一生成元ポリシー？
JSONP
例
いいね:
関連

APIでデータ取得！簡単やん！？

まぁ、簡単な訳ですが（笑）　jQueryのAjaxという関数を使って、昔から言われるいわゆるFetchをして、データを取ってくるっていうのがあるのですが。。

こういうScriptを書いたとすると。。

<script src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "https://hogehoge.com/?",
dataType: "json",
}).done(function(data, dataType) {

if(data == null) alert('データが0件でした');
});

って書いてデータを取得しようとするとですね。

CORS　Policyによって、Nullが返されてますよ！　って出てきて、

データ取れませ～ん

そのままブラウザでアクセスすると取れるのに～（笑）

CORS Policy？　同一生成元ポリシー？

で。。Webページは通常、XMLHttpRequestオブジェクトを使ってリモートサーバーからデータを送受信できるんですが、その機能は同一生成元ポリシー（Same Origin Policy）により制限を受けているんです。　基本は同じサーバーから出てないとダメってことですね。

で。。　これサーバ側にスクリプトを置いて読込み、それを、Webで表示させるようにするか、APIのサーバーが、承認して同一ですよっていう許可を与えて表示させるのが正統な方法です。

JSONP

今は、CORS Protocolを使うっていうのが正統派ですが。。　JSONPっていうのは、ブラウザ側に読み込ませて一つに見せるということをしてくれる方法です。

簡単で、

dataType: "json",

を

dataType: "jsonp",

とするだけです。

たったこれだけのこと。。知らないと。。　なんでかな？ってなりますね（笑）知らなかったのよ～ん（笑）

例

とあるJSON形式のデータを返すAPIをAjaxで叩いて、番組情報を取ってくるスクリプトです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Now on Air</title>

<script src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "https://hogehoge.com/",
dataType: "jsonp",
}).done(function(data, dataType) {

if(data == null) alert('データが0件でした');

var $content = $('#content');
for (var i =0; i<data.length; i++) {
$content.append("<tr><td>" + data[i].id + 
"</td><td>" + data[i].title + "</td><td>" + data[i].sub_title +
"</td><td>" + data[i].performer + "</td><td>" + data[i].start +
"</td><td>" + data[i].end 
+ "</td></tr>");
}
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
alert('Error : ' + errorThrown);
});
});
</script>
</head>
<body>
<h1>Now On Air</h1>
<table border='1' cellpadding ='4' cellspacing ='0' id="content"></table>
</body>
</html>

キレイにしてませんが。。このままとあるAPIを叩くと、こういう風に出てきます。