過去バージョン

この記事の要点
ブラウザ JavaScript でプロトコル + ホスト + ポートを取りたいなら window.location.origin 例: http://127.0.0.1:8000 （末尾スラッシュなし） パス込みの URL なら window.location.href、ホストだけなら window.location.host IE11 は origin が未サポート — ポリフィルで対応 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	ハッシュ（# 含む）

IE11 対応（origin のポリフィル）

IE11 は location.origin をサポートしていません。古い環境を考慮する場合はポリフィルを使います。

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

サーバー側で base url を取得したい場合

JavaScript ではなく、サーバー側（PHP / Java / Python）でリクエストの base url を取りたい場合の方法:

PHP

$baseUrl = (isset($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'];

Spring Boot (Java)

@GetMapping("/url")
public String getBaseUrl(HttpServletRequest request) {
    return request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
}

Django (Python)

from django.urls import reverse
baseUrl = request.build_absolute_uri('/')

注意点・落とし穴

• 末尾スラッシュなし: origin は http://example.com で終わるので、パスを連結する際は / を自分で付ける
• 標準ポートでは port が空: HTTP の 80・HTTPS の 443 は location.port が空文字 ""（数値 80 ではない）
• file:// プロトコル: ローカルファイルとして開いた場合 origin は "null" 文字列になる
• CORS との関係: origin は同一オリジンポリシーの判定基準
• Reverse Proxy 下: nginx / Apache 等のプロキシ越しでは、サーバー側で X-Forwarded-Host 等のヘッダを確認する必要がある

関連記事

• IT 総合 Wiki トップ