接続がローカルホストかどうかをjavascriptで確認する方法

ページのロードがローカルマシン上にあるかどうかをJavaScriptで確認したい。

これを行う理由は、開発時にサーバー側（C＃）の両方の検証が正しく機能していることを確認したいためです。したがって、クライアント側とサーバー側の両方のエラーを表示するのが好きです。

したがって、私がテストしている間、jqueryの検証にフラグがあり、常に無効なデータを通過させるだけです。このようにして、クライアント側とサーバーのエラーを一度に確認できます。

ただし、現在は、開発から本番に移行するときに、手動で行ったり来たりする必要があります。

location.hostname変数はあなたの現在のホストを提供します。これで、どの環境にいるかを判断できます。

if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
    alert("It's a local server!");

ブラウザで静的htmlを起動する場合、たとえばfile:///C:/Documents and Settings/Administrator/Desktop/「localhost」を検出するような場所からは機能しません。location.hostname空の文字列を返します。そう

if (location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname === "")
    alert("It's a local server!");

まだすべてを網羅しているわけではありませんが、少し改善される可能性があります。これで、ドメインの配列を作成し、.includesを使用できます

const LOCAL_DOMAINS = ["localhost", "127.0.0.1", ...];

if (LOCAL_DOMAINS.includes(window.location.hostname))
  alert("It's a local server!");

これが、Reactでチェックされる方法です。ServiceWorkerを登録します。localhostとIPv6を含むホスト名をチェックし、127で始まるマッチングによってlocalhostにいるかどうかをチェックするための良い方法です 。

const isLocalhost = Boolean(
    window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

これを行う簡単な方法は、ホスト名をlocalhostに対してチェックするか、カスタムドメイン名をサブストリングに対してチェックすることです。この場合は、http：//testsite.localなどの「.local」URL です。

var myUrlPattern = '.local';
if (window.location.hostname === "localhost" || location.hostname === "127.0.0.1" || window.location.hostname.indexOf(myUrlPattern) >= 0) {
    alert("It's a local server!");
}

他のスクリプトと同じメカニズムを使用した最短形式：

if ( ["localhost", "127.0.0.1", ""].includes(window.location.hostname) ) {
     console.log("It's local host !");
}

これは、ローカルネットワークIP がドメインで終わる10.0.or 192.168.またはBonjourで始まるいくつかの一般的なケースもカバーしています.local：

export function isLocalNetwork(hostname = window.location.hostname) {
  return (
    (['localhost', '127.0.0.1', '', '::1'].includes(hostname))
    || (hostname.startsWith('192.168.'))
    || (hostname.startsWith('10.0.'))
    || (hostname.endsWith('.local'))
  )
}

次のように、c＃を使用してページの背後にあるコードの1つを検出できます。

if ((Request.Url.Host.ToLower() == "localhost"))
{
    // ..., maybe set an asp:Literal value that's in the js
}

または、クライアントスクリプトから実行する場合は、window.location.hostの値を確認できます。

if (window.location.host == "localhost")
{
    // Do whatever
}

お役に立てれば。

const LOCAL_DOMAINS = [ "localhost", "127.0.0.1" ];

/* offline || development */
if ( LOCAL_DOMAINS.includes(location.hostname) )
{
    BASE_URL_PUBLIC = location.hostname + "/folder/website/"; // your project folder
}

/* online || production */
else
{
    BASE_URL_PUBLIC = location.hostname;
}

上記の答えはほとんど問題を解決しますが...

• localhostが必ずしも「localhost /」でない場合はどうなりますか？
• 開発中にFE検証を実行したい場合はどうなりますか？
• 開発中にさまざまな動作が必要な場合
  （fe検証、検証、検証なし）

1つの解決策は、ロケーションハッシュを設定して確認することです。

http://myname.foo.com/form.html#devValidation

スイッチで無制限のオプションを追加できます

switch(location.hash) {}
    case '#devValidation':
        // log the results and post the form
        break;
    case '#beValidation':
        // skip front end validation entirely
        break;
    case '#noValidation':
        // skip all validation $('[name=validationType']).val('novalidation');
        break;
    case '#feValidation':
    default:
        // do fe validation
        break;
}

正規表現は遅くなります*が、短くて端正です。また、ここでは誰もIPv6 localhost（:: 1）をチェックしません

/localhost|127\.0\.0\.1|::1|\.local|^$/i.test(location.hostname)

一般的なローカルホスト、.localドメイン、ファイルをチェックします：（空のホスト名）。

*）Chromeでは、パフォーマンスが[].includes(...)最高（42ミリ秒）で、その後に配列項目チェック（119ミリ秒）、次に[].indexOf(...) > -1（289ミリ秒）、最後に正規表現（566ミリ秒）の単純なループ（for、while）が続きます。ただし、ブラウザによって最適化方法が異なるため、これらの測定値はある程度相対的です。FF 52 ESR includesとindexOf同様の結果では、regexpは2倍遅く、ループは6倍遅くなります。

上記のコメントに基づいて、次の正規表現は、URLが「localhost」、IPアドレスIPv4またはIPv6であるかどうかを確認するのに役立ちました。

window.location.hostname.match(/localhost|[0-9]{2,3}\.[0-9]{2,3}\.[0-9]{2,3}\.[0-9]{2,3}|::1|\.local|^$/gi)