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

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

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

JS コード例

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オブジェクトを作成するとドメイン(ホスト名）やパスだけ確認するときに便利です。
以下の例ではレスポンスの送信元が特定のドメイン（ホスト名）だった場合のみ、レスポンスデータを抽出します。

JS コード例

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

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

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