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

<a href="https://pixabay.com/users/Pexels/">Pexels</a> / Pixabay

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を叩くと、こういう風に出てきます。

投稿者 tom2rd

コメントを残していただけるとありがたいです

Loading Facebook Comments ...

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください