Як перевірити за допомогою 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, реєструють працівника служби , хороший спосіб перевірити, чи перебуваєте ви на 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}$/
    )
);

Простий спосіб зробити це - просто перевірити ім’я хосту на 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!");
}

Найкоротша форма з використанням тієї самої механіки, що і інші сценарії:

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

Це також охоплює деякі поширені випадки, коли 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'))
  )
}

Ви можете виявити в одному зі свого коду позаду сторінок з c #, наприклад:

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, перевірка, без перевірки )

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

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 (:: 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 разів повільнішим.

На основі наведених коментарів наступний регулярний вираз допоміг мені перевірити, чи є 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)