JavaScript

最終更新日:
公開日:

レシピ

Ajax

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

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);
});

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。