タイトル: base urlを取得する方法
SEOタイトル: 【Javascript】base urlを取得する方法
結論
JavaScript で base URL を取得したい場合は、通常は window.location.origin を使います。
プロトコル、ホスト名、ポート番号までを含んだ形で取得できます。
|
const baseUrl = window.location.origin; console.log(baseUrl); |
出力例
|
http://127.0.0.1:8000 |
origin で取得できる内容
- protocol :
http:やhttps: - hostname : ドメイン名またはIPアドレス
- port : 指定されている場合のポート番号
たとえば https://example.com:8443/app/page にいる場合、window.location.origin は https://example.com:8443 になります。
パス部分の /app/page は含まれません。
パスも含めて組み立てたい場合
API の URL や画面遷移用の URL を作りたいときは、origin にパスをつなげて使います。
|
const apiUrl = window.location.origin + '/api/users'; const loginUrl = window.location.origin + '/login'; |
pathname や href との違い
window.location.origin: プロトコル + ホスト + ポートwindow.location.pathname: パス部分だけwindow.location.href: URL 全体
「base URL が欲しい」だけなら origin を使うのが一番分かりやすいです。
古い環境での補足
かなり古いブラウザでは window.location.origin が使えないことがあります。
その場合は protocol / hostname / port を結合して自前で作れます。
|
const origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : ''); |
まとめ
JavaScript で base URL を取得する基本は window.location.origin です。
URL 全体が必要なら href、パスだけ欲しいなら pathname と使い分けると整理しやすくなります。