jsonpを使って別ドメインのデータを取得する

別ドメインにあるjson形式の情報をJavaScriptで取得する方法として、jsonpを使うやり方を試してみます。

サンプルコード

まずjsonpを試してみる前に、jsonファイルでの取得を試してみます。
以下のようなjsonファイルを用意して、別ドメインに設置します。

{
    "key": "value"
}

Ajaxで取得して、結果をconsoleに表示してみます。

$(function() {
  const getData = $.ajax({
    url: 'https://test.cly7796.net/blog/sample/get-data-of-another-domain-using-jsonp/sample.json',
    dataType: 'json'
  });
  getData.then(
    function(data) {
      console.log('取得内容:', data);
    },
    function(error) {
      console.log('エラー内容:', error);
    }
  );
});

この場合、取得しているページとjsonの設置しているドメインが異なるため、以下のようなエラーになります。

Access to XMLHttpRequest at 'https://test.cly7796.net/blog/sample/get-data-of-another-domain-using-jsonp/sample.json' from origin 'https://cly7796.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

別ドメインのjsonを取得するデモページ

次にjsonpを使用する方法を試してみます。
jsonファイルを以下のように変更して、別ドメインに設置します。

sample(
    {
        "key": "value"
    }
)

先ほどと同様に、Ajaxで取得して結果をconsoleに表示してみます。

$(function() {
  const getData = $.ajax({
    url: 'https://test.cly7796.net/blog/sample/get-data-of-another-domain-using-jsonp/sample.jsonp',
    dataType: 'jsonp',
    jsonpCallback: 'sample'
  });
  getData.then(
    function(data) {
      console.log('取得内容:', data);
    },
    function(error) {
      console.log('エラー内容:', error);
    }
  );
});

これで別ドメインにある情報を取得することができました。
jsonpのデモページ