LoginSignup
ohtamomoko
@ohtamomoko

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

APIで通信エラーがでます。

Q&A

Closed

HTMLJavaScriptAPIJSONCORS

APIを使っているのですがfill（通信に失敗しました）になります。このAPIは多分cors設定されてなくてJSONPでもないです。なんででしょうか？どうすればいいですか？
vsコードでコードを書いてedgeで開いています。
サーバーにはあげていません。コンソールにエラーが出てるんですが意味が分かりません。スクリーンショット 2025-01-22 092231.png

またjavascriptでAPIを使う勉強をするのにおすすめの本とかはありますか？

APIが初めてで犬の画像が表示されるプログラムを作っています。

発生している問題・エラー

例）

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

$.ajax({
    url: 'https://images.dog.ceo/breeds/terrier-norfolk/n02094114_3911.jpg',
    dataType: 'json',
}).done(function(data){
    $('#img').attr('src', data.message);
    $('#name').attr(data.message.split('/')[4]);
}).fail(function(data){
    alert('通信に失敗しました');
});

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <article>
    <p><img id="img" src="" art="いぬの画像"></p>
    <h1 id="name"></h1>
</article>
    <script src="js/jquery-3.7.1.min.js" defer></script>
    <script src="js/script.js" defer></script>
</body>
</html>

CSS
@charset 'UTF-8';




article{
    width: 500px;
    margin: auto;
}

例）

def greet
  puts Hello World
end

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

1

6Answer

YottyPG
@YottyPG

指定するURLが間違っているようです。
APIで取得される結果の画像URLとなってしまっています。

ランダムに犬の画像を取得したい場合は、
https://dog.ceo/api/breeds/image/random
を指定してあげます。

5Like
sigma_devsecops
@sigma_devsecops

CORSエラーが出ていることから，APIの指定先が誤っているもしくは，APIの呼び出し方が間違っているのかもしれません。

一旦curlコマンドを使ってAPIに疎通できることを試してみると良いと思います。
以下はcurlコマンドでランダムな犬の画像のurlが取得できることを試しています。

curl https://dog.ceo/api/breeds/image/random
{"message":"https:\/\/images.dog.ceo\/breeds\/terrier-norfolk\/n02094114_1353.jpg","status":"success"}%

追記
参考までに最低限動くものを作ってみました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test dog api</title>
</head>
<body>
    <h1>Random Dog Images</h1>
    <img id="dogImage" src="" alt="Random Dog" />
    <br>
    <button onclick="getRandomDog()">Get Another Dog</button>

    <script>
        async function getRandomDog() {
            const url = "https://dog.ceo/api/breeds/image/random";
            try {
                const response = await fetch(url); // APIを叩く
                const data = await response.json(); // responseをjsonに変換
                const imageUrl = data.message; // jsonから画像のurlを取得
                document.getElementById('dogImage').src = imageUrl; // htmlのimg tagの画像の参照先を置き換える
            } catch (error) {
                console.error("Error fetching the dog image:", error);
                alert("Could not fetch a dog image. Please try again later.");
            }
        }

        // Load a dog image when the page first loads
        window.onload = getRandomDog;
    </script>
</body>
</html>
2Like
changkejun
@changkejun

なぜajaxで画像を取得するのは不思議です。直接imageタグのsrcにURLを代入すれば自動的にロードしてくれますが、、、

$('#img').attr('src', "https://images.dog.ceo/breeds/terrier-norfolk/n02094114_3911.jpg");
1Like
juner
@juner

APIを使っているのですが fail（通信に失敗しました）になります。このAPIは多分cors設定されてなくてJSONPでもないです。なんででしょうか？どうすればいいですか？

そのサービスのそのAPIが cors 対応されていないのではないでしょうか？
多分想定されたAPIを使っていない可能性があります。

またjavascriptでAPIを使う勉強をするのにおすすめの本とかはありますか？

本は知りませんが、公式文書でいいのではないでしょうか？

リクエストの投げ方の勉強でしたら

とか

とかでいいような気がしますが……。（XMLHttpRequest 自体は古いものなので 新しい fetch をおすすめします。

ちゃんと公式の仕様書へのリンクもあるので心配になったら確認もできてありがたいです。

あと、その https://images.dog.ceo/breeds/terrier-norfolk/n02094114_3911.jpg へのリクエストは json を返すのでしょうか？ （その使い方が想定されているのでしょうか？

その API の元を知らないので私の知っている https://picsum.photos/ あたりでサンプルを書きます。

私が試しに作ったものを置いて置きます。

<main>
  <img id="image" hidden />
</main>
<style>
  :where(#image) {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
</style>
<script type="module">
  try {
    /** 画像ファイルパス */
    const download_url = await (async () => {
      // 画像情報の読み込み
      const response = await fetch("https://picsum.photos/seed/random/info");
      // response.ok を見て 正常応答か確認
      if (!response.ok)
        // そうでないならエラー
        throw new Error(response.statusText, {cause: response});
      // json として response body を読み込む取得
      const json = await response.json();
      // 必要なのは 画像ファイルのパスなのでそれを返す
      return json.download_url;
    })();
    // 設定先の image の取得
    const image = document.getElementById("image");
    // 読み込み完了待機用の resolver の用意
    const { resolve, reject, promise } = Promise.withResolvers();
    // #region 完了待ち用のイベントのセット
    image.addEventListener("load", () => resolve());
    image.addEventListener("error", () => reject(new Error("読み込みエラー")));
    // #endregion

    // 画像読み込み開始
    image.src = download_url;
    // 読み込み完了まで待つ
    await promise;
    // 読み込みが完了したので表示する
    image.hidden = false;
    console.log("読み込み完了");
  } catch (error) {
    console.error(error?.mesasge ?? error);
  }
</script>

1Like
vram
@vram

Javascript以前にHTTPとか理解されていないようにみえますし
前回の質問でそのAPI呼びを手動でやったらわかりますよね？と言ったはずなのですがされてないみたいですし
勉強とか以前に「人のアドバイスを聞くこと」を学習する必要がありそうです

とにかく下記のリンクブラウザでクリックしたら結果が表示されると思いますが
statusキーが"success"
messageキーに画像のURLが入るので後はその画像を表示すればできます

1Like

Comments

  1. @ohtamomoko

    Questioner

    APIの呼び出しはやりました。出来て配列が表示されたけどそれがJSONかJSONPかはちょっとわかんなかったです。HTTPってなんですか？

  2. @ohtamomoko

    Questioner

    人のアドバイスを聞くことはどういう風にやればいいのか、学習法を教えていただけると嬉しいです。知らない言葉とかメソッドが出てきてどうすればいいのか分かりません。JavascriptとAPIのことどう勉強したらいいのでしょうか？

  3. @YottyPG

    ＞それがJSONかJSONPかはちょっとわかんなかったです。

    まだ勘違いされているようなので、改めて補足しておきます。
    前回の質問の回答にもありますが、JSONは文字列のデータのことで、JSONPはやり取りする仕組みのことです。

    また、JSONPはセキュリティの問題により非推奨になっており、最近見かけることはほぼないと思います。

  4. @juner

    知らない言葉とかメソッドが出てきてどうすればいいのか分かりません。JavascriptとAPIのことどう勉強したらいいのでしょうか？

    JavaScript の標準API(JavaScript のクラスやメソッド等)であるならば それは MDN で確認したらいいのではないでしょうか……？ （Firefox の Mozilla の他、 Microsoft や Google 等も協力しているドキュメントなので

SurferOnWww
@SurferOnWww

前のあなたのスレッド、

でいろいろ回答しましたが、ほとんどなにも理解してない様子。理解してから先に進みましょう。

なお、このスレッドの質問の回答としては @YottyPG さんの回答を読んでください。それを読んで理解できなければ、そのコメント欄で質問してください。

それから、質問のテンプレートにあるもので、不要なものは消しましょう。「発生している問題・エラー」とか「例）」とか「自分で試したこと」とか、あなたが書いたのではなく、テンプレートのものですよね。そんなのを残しておくのは質問としてダメダメです。前の質問もそうでした。質問文をきちんと書くことから始めてください。

0Like

Your answer might help someone💌

LoginSign Up