REST APIのJSONを、urlから、Javascriptで取得したい

Question

REST APIのJSONを、url http://ip.jsontest.comから、Javascriptで取得したいのですが、

デベロッパーツールのコンソールで以下コードを試すと、

var obj = $.getJSON('http://ip.jsontest.com', function(data) {});

(jQueryを使っています。)

以下のようにGETエラーが出てしまいます。

jquery.min.js:4 GET https://ip.jsontest.com/?_=15301... 0 ()
send	@	jquery.min.js:4
ajax	@	jquery.min.js:4
n.(anonymous function)	@	jquery.min.js:4
getJSON	@	jquery.min.js:4
(anonymous)	@	VM16777:1

他のJSONのURLだと、取得できるものもあるのですが、このようにできないものもあり、その違いがわかりません。

何が原因なのでしょうか。？

例えばこちらのURLですと、うまく取得できます。

var obj = $.getJSON('https://qiita.com/api/v2/users/TakahiRoyte', function(data) {});

Comments

[m.ts10806]

同じURLをブラウザから実行するとどうなりますか？

[igar]

上であげた２つのURL共に、chromeブラウザから閲覧できます。ソースコードもJSONそのままです。

[arasi]

あなたのサイトは https・httpどちらですか

[igar]

デベロッパーツールのコンソールを開いたサイトは、httpsです。

[m.ts10806]

表示されたJSONを構文チェックサービスにかけてみてください。

[igar]

https://jsonlint.com こちらのサイトでチェックしておりますが、特に構文間違いはないようです。

Answer 1

もう答え出てますね。
jQuery でも fetchAPI でも何でも良いですが、https から http で配信されるコンテンツをリクエストすることは出来ません。

ニコニコ動画に http で json を返す api あったので試してください。
http://ip.jsontest.com と同様のエラーが出るはずです。

fetch('http://www.nicovideo.jp/marquee/chblog_marquee.json') // -> 失敗する
fetch('http://ip.jsontest.com') // -> 失敗する
fetch('https://qiita.com/api/v2/users/TakahiRoyte') // -> 成功する
fetch('https://jsonplaceholder.typicode.com/posts') // -> 成功する

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content