Как с помощью javascript проверить, является ли соединение локальным хостом?

Question 1

Я хочу проверить свой javascript, если страница загружается на моем локальном компьютере.

Причина, по которой я хочу это сделать, заключается в том, что при разработке я хотел бы убедиться, что проверка на стороне сервера (C #) работает правильно. Поэтому мне нравится видеть ошибки как на стороне клиента, так и на стороне сервера.

Итак, пока я тестирую, у меня есть флаг в моем материале проверки jquery, который всегда пропускает недопустимые данные. Таким образом, я сразу вижу ошибки на стороне клиента и сервера.

Однако прямо сейчас мне приходится вручную переходить и менять туда и обратно при переходе от разработки к производству.

Question 2

location.hostnameПеременная дает текущий хост. Этого должно быть достаточно, чтобы определить, в какой среде вы находитесь.

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

Question 3

при запуске статического 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!");

Question 4

Это все еще не уловка, но это может быть небольшое улучшение. Теперь вы можете создать массив доменов и использовать .includes

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

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

Question 5

Вот как это проверяется в React, регистрируется сервисный работник , хороший способ проверить, находитесь ли вы на localhost, проверив имя хоста, включая localhost и IPv6 , и сопоставив начало с 127 :

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

Question 6

Кратчайшая форма с использованием той же механики, что и другие скрипты:

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

Question 7

Это также касается некоторых распространенных случаев, когда IP-адреса локальной сети начинаются с 10.0.или 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'))
  )
}

Question 8

Самый простой способ сделать это - просто проверить имя хоста на соответствие localhost или проверить свое собственное доменное имя на подстроку, в данном случае URL-адреса ".local", например http: //testsite.local

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

Question 9

Вы можете обнаружить в одном из своих кодов страниц с С #, например:

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
}

Надеюсь это поможет.

Question 10

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

Question 11

Приведенные выше ответы в основном решают проблему, но ...

Что, если localhost не обязательно «localhost /»?
Что, если вы хотите провести проверку FE во время разработки?
Что делать, если вам нужно другое поведение во время разработки
( например, проверка, проверка, проверка, без проверки )

Одно из решений - установить хэш местоположения и проверить его.

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

Question 12

Регулярное выражение медленнее *, но коротко и аккуратно. Кроме того, здесь никто не проверяет наличие IPv6 localhost (:: 1)

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

Он проверяет общий localhost, домен .local и файл: (пустое имя хоста).

*) В Chrome производительность [].includes(...)самая лучшая (42 мс), затем следует простой цикл (for, while) с проверкой элементов массива (119 мс), затем [].indexOf(...) > -1(289 мс) и, наконец, регулярное выражение (566 мс). Но эти измерения в какой-то степени относительны, потому что разные браузеры по-разному оптимизированы. В FF 52 ESR includesи indexOfс аналогичными результатами регулярное выражение в 2 раза медленнее, а цикл в 6 раз медленнее.

Question 13

Основываясь на приведенных выше комментариях, следующее регулярное выражение помогло мне проверить, является ли 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)