この記事の要点

ブラウザ JavaScript でプロトコル + ホスト + ポートを取りたいなら window.location.origin 例: http://127.0.0.1:8000 （末尾スラッシュなし） SSR や Node.js では window が存在しない — Next.js ならtypeof window === "undefined" でガード IE11 は origin が未サポート — protocol + "//" + host でポリフィル location オブジェクトは複数の関連プロパティを持つ — 用途で使い分ける

基本: window.location.origin

ブラウザ JavaScript で「プロトコル + ホスト + ポート」のベース URL を取得するには window.location.origin を使います。

// 例: 現在 http://127.0.0.1:8000/users/123 にいる場合
const baseUrl = window.location.origin;
console.log(baseUrl);
// → "http://127.0.0.1:8000"

// URL を結合する場合（末尾スラッシュなしなので / を付ける）
const apiUrl = baseUrl + '/api/users';
console.log(apiUrl);
// → "http://127.0.0.1:8000/api/users"

location オブジェクトの全プロパティ

用途に応じて使い分けます。例として https://example.com:8080/users/123?tab=profile#info にいる場合:

プロパティ	値	説明
location.href	https://example.com:8080/users/123?tab=profile#info	URL 全体
location.origin	https://example.com:8080	プロトコル + ホスト + ポート
location.protocol	https:	末尾コロン込み
location.host	example.com:8080	ホスト + ポート
location.hostname	example.com	ホストのみ（ポートなし）
location.port	8080	ポート番号（デフォルトポートは空）
location.pathname	/users/123	パス
location.search	?tab=profile	クエリ文字列（? 込み）
location.hash	#info	フラグメント（# 込み）

SSR (Next.js / Nuxt) では window が undefined

Next.js の getServerSideProps やコンポーネントの最上位、Nuxt の setup で window.location.origin を呼ぶと ReferenceError: window is not defined になります。

// ❌ NG: SSR でエラー
const baseUrl = window.location.origin;

// ✅ OK: typeof でガード
const baseUrl = typeof window !== 'undefined'
    ? window.location.origin
    : process.env.NEXT_PUBLIC_BASE_URL;

// ✅ OK: useEffect 内で取得（クライアントのみ実行される）
useEffect(() => {
    setBaseUrl(window.location.origin);
}, []);

サーバ側で URL を組み立てたいときは、環境変数 NEXT_PUBLIC_BASE_URL / NUXT_PUBLIC_BASE_URL 等にベース URL を入れておくのが定石です。

IE11 対応のポリフィル

window.location.origin は IE11 で未サポート。レガシー対応が必要なら以下のポリフィルを入れます:

if (!window.location.origin) {
    window.location.origin = window.location.protocol + '//' +
        window.location.hostname +
        (window.location.port ? ':' + window.location.port : '');
}

サブパス配下のアプリケーション

例えば https://example.com/myapp/ 配下にデプロイしたアプリで API パスを組み立てる場合、origin だけでは /myapp が抜けます。HTML の や、ビルド時にベースパスを埋め込む方式で対応:

// Vite: import.meta.env.BASE_URL を使う
const baseUrl = window.location.origin + import.meta.env.BASE_URL;
// → "https://example.com/myapp/"

// Vue Router / React Router でも同じ思想
// 環境変数からベースパスを取り、location.origin と結合する

新しい URL API

URL の組み立てや解析には URL コンストラクタが便利です。手動の文字列結合より安全:

const u = new URL(window.location.href);
console.log(u.origin);      // "https://example.com:8080"
console.log(u.searchParams.get('tab'));  // "profile"

// API URL を組み立てる
const apiUrl = new URL('/api/users/123', window.location.origin);
apiUrl.searchParams.set('fields', 'id,name');
console.log(apiUrl.toString());
// → "https://example.com:8080/api/users/123?fields=id%2Cname"

よくあるハマりどころ

• 末尾スラッシュ: origin は末尾なし、href はパス次第。結合時の重複に注意
• localhost と 127.0.0.1: ブラウザは別オリジン扱い。CORS 設定ではどちらも許可するか統一する
• http と https の混在: HTTPS ページから HTTP API を叩くと Mixed Content でブロック
• ポート省略時: デフォルトポート (80/443) なら location.port は空文字
• iframe の中: window.location.origin は親ではなく iframe 自身の origin を返す