レシピ

Ajax

Fetch APIで受け取ったレスポンスの送信元のURLを取得する

最終更新日：2023-12-24
公開日：2021-03-11

Fetch APIによるAjax通信において、レスポンスデータの送信元を確認する方法について解説します。

この記事のポイント

Fetch APIのレスポンス送信元を確認するときはResponseオブジェクトのurlプロパティを参照する
urlプロパティをURLオブジェクトに変換するとURLの確認をするときに便利

Fetch APIで受け取ったレスポンスの送信元URLを取得する

Fetch APIのレスポンス送信元を確認したいときは、レスポンスで受け取ったデータ入っているResponseオブジェクトのurlプロパティを参照することで確認することができます。

JavaScript コード例

fetch('/text/test.json')
.then(res =>  {
  console.log(res.url);
})
.then(data => {
  console.log(data);
});

例えば通信先のドメインが「https://gray-code.com」だった場合、上記のコードではurlプロパティの値は「https://gray-code.com/text/test.json」になります。

urlプロパティから取得できるのはURLのテキストですが、以下のようにURLオブジェクトを作成するとドメイン(ホスト名）やパスだけ確認するときに便利です。
以下の例ではレスポンスの送信元が特定のドメイン（ホスト名）だった場合のみ、レスポンスデータを抽出します。

JavaScript コード例

fetch('/text/test.json')
.then(res =>  {

  // urlプロパティからURLオブジェクトを作成
  let url = new URL(res.url);

  if( url.host === 'gray-code.com' ) {
    return res.json();
  }
})
.then(data => {
  console.log(data);
});

関連記事