APIの ソースの画像が Forbidden

Question

Avgle API でアプリケーションを作成中以下のRequestを投げたところ、以下のResponseが返ってきました。

<Request> https://api.avgle.com/v1/videos/1?limit=5

<Response>(videos)

{
    title: 'hzeznz3bz33z2gz2m',
    keyword: 'jav',
    channel: '18',
    duration: 10340.2,
    framerate: 29.97,
    hd: true,
    addtime: 1623019445,
    viewnumber: 430,
    dislikes: 0,
    video_url: 'https://avgle.com/video/RsicicPzEcd/hzeznz3bz33z2gz2m',
    embedded_url: 'https://avgle.com/embed/6d0330e1b076b3274170',
    preview_url: 'https://static-clst.avgle.com/videos/tmb16/530447/1.jpg',
    preview_video_url: 'https://static-clst.avgle.com/videos/tmb16/530447/preview.mp4',
    private: false,
    vid: '530447',
    uid: '863517'
  }

embedded_urlに関してはiframeタグで表示することができたのですが、preview_urlをimgタグのsrcに指定し、表示しようとすると以下のエラーが発生します。
<エラー>
GET https://static-clst.avgle.com/videos/tmb16/530534/1.jpg 403

上のURLに直接ブラウザからアクセスするとしっかりと表示されるのですが、これはAPIのアクセス権が与えられていない、どうしようもないエラーなのでしょうか。それとも解決の余地があるものなのでしょうか。下のReferenceを読みましたが、本件に関することは述べられていませんでした。　協力よろしくお願いします。

<API> https://avgle.github.io/doc/ ```js const res = await axios.get("https://static.tvmaze.com/uploads/images/original_untouched/299/748854.jpg"); const data = res.data; console.log(data); return { props: { data } }

//-------------------下のような文字列が長々と続いたデータが返ってくる
��r=�Es�ڦ}Ne�2,�v���|�L�H#p;��q�����u�'P~�?ڜ|�����k�rc

Answer 1

サーバー側で他サイトからのアクセスを許可していないのだと思われるので、img src=で直接そのURLでページに表示させるのは無理だと思います。
ただ、単純なGETリクエストは受け入れるようなので、何らかの方法で別途GETリクエストして自サーバー内に画像を保存し、それをimgで表示させることはできると思います。
たとえば

wget https://static-clst.avgle.com/videos/tmb16/530447/1.jpg

でカレントディレクトリに1.jpgを保存できると思います。

Comments

[gasuketu]

回答ありがとうございます。itagagakiさんがおっしゃったようにサーバーサイドで画像のURLに対して単純なGETリクエストを試みました。レスポンスはstatusコード200を返しましたが、返ってきたデータが文字化け(多分)しているようで, エンコードの問題かと思い、いくらか試行しましたがうまくいきませんでした。　本件からはやや逸れているかもしれませんが、引き続き協力いただきたく思います。ちなみにNext.jsのgetServerSideProps関数からリクエストを行いました。

[itagagaki]

その作成されたGETリクエストコードで、同一サーバー（サイト）内の適当なjpgファイルや、アクセスが制限されていない他サーバーの適当なjpgファイルに向けて実行した場合は、ちゃんと取得できますか？

[gasuketu]

ただいま他のAPIで確認したところ同じようなリクエスト(ちゃんと取得できていない)が返ってきました。今回のAPIは直接埋め込める、アクセス制御のないAPIです。上にgetServerSideProps内のリクエストのコードを追記させていただきました。　問題が完全に変わってしまいましたがよろしくお願いします。