source

연결이 로컬 호스트인지 자바스크립트로 확인하는 방법은 무엇입니까?

ittop 2023. 8. 15. 11:46
반응형

연결이 로컬 호스트인지 자바스크립트로 확인하는 방법은 무엇입니까?

페이지 로딩이 로컬 컴퓨터에 있는지 자바스크립트를 확인하고 싶습니다.

이 작업을 수행하려는 이유는 개발할 때 서버 측(C#) 검증이 모두 올바르게 작동하는지 확인하기 때문입니다.그래서 저는 클라이언트 측 오류와 서버 측 오류를 모두 표시하고 싶습니다.

그래서 테스트하는 동안 항상 잘못된 데이터를 통과하도록 허용하는 유효성 검사 항목 플래그가 jquery에 있습니다.이렇게 하면 클라이언트 측과 서버 오류를 한 번에 볼 수 있습니다.

하지만 지금은 개발에서 생산으로 이동할 때 수동으로 왔다 갔다 해야 합니다.

location.hostnamevariable은 현재 호스트를 제공합니다.이 정도면 현재 환경을 파악할 수 있습니다.

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

브라우저에서 정적 html을 시작하는 경우(예: 같은 위치에서)file:///C:/Documents and Settings/Administrator/Desktop/로컬 호스트를 검색할 수 없습니다.location.hostname빈 문자열을 반환합니다. 그래서

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

이렇게 React에서 확인하고 서비스 작업자를 등록하며, localhostIPv6를 포함한 호스트 이름을 확인하고 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}$/
    )
);

여전히 모든 것을 잡을 수는 없지만 약간의 개선이 될 수도 있습니다.이제 도메인 배열을 만들고 .include를 사용할 수 있습니다.

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

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

다른 스크립트와 동일한 메커니즘을 사용하는 최단 형식:

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

다음 코드는 주소가 다음과 같은지 확인합니다.localhost즉, 이 요청이 발생한 동일한 장치를 가리키는지 여부입니다.

export function isLocalHost(hostname = window.location.hostname) {
  return ['localhost', '127.0.0.1', '', '::1'].includes(hostname)
}

다음 코드는 또한 요청이 로컬 네트워크에 들어가는지 여부를 확인합니다.로컬 네트워크 IP가 다음으로 시작하는 몇 가지 일반적인 경우10.0.또는192.168.또는 mDNS / 다음으로 끝나는 봉쥬르와 같은 도메인.local:

export function isLocalNetwork(hostname = window.location.hostname) {
  return (
    (['localhost', '127.0.0.1', '', '::1'].includes(hostname))
    || (hostname.startsWith('192.168.'))
    || (hostname.startsWith('10.'))
    || (hostname.endsWith('.local'))
  )
}
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에 대해 확인하거나 사용자 지정 도메인 이름을 하위 문자열(이 경우 ".local" URL(예: 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!");
}

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
}

이게 도움이 되길 바랍니다.

위의 답변들은 대부분 문제를 해결해주지만...

  • localhost가 반드시 'localhost/'가 아닐 경우 어떻게 해야 합니까?
  • 개발 중에 FE validation을 하려면 어떻게 해야 합니까?
  • 개발 중에 다른 동작을 원한다면 어떻게 해야 합니까?
    (유효성 검사, 유효성 검사, 유효성 검사 없음)

한 가지 해결책은 위치 해시를 설정하고 확인하는 것입니다.

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, .localdomain 및 file:(빈 호스트 이름)을 확인합니다.

에서 *) Chrome의 [].includes(...)검사가 단순 for, ), 다음으로 배열 항목 검사가 ), 다음으로 가 가 좋 고 통 확 항 을 단 루 인 뒤 니 릅따가프다어순한목레이장ms119다(뒤▁is니릅따▁the▁((119ms)가.[].indexOf(...) > -1(289ms), 마지막으로 정규식(566ms)입니다.그러나 이러한 측정은 브라우저마다 서로 다르게 최적화되어 있기 때문에 상대적입니다. ESR FF 52 ESR에서includes그리고.indexOf느립니다. regexp는 2배 느립니다. regexp는 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)

여기에 있는 많은 대답들은 몇몇 에지 케이스를 놓치고 있습니다.etc에 "DNS/hosts/etc"를 할 수 .something.localhost.

다음은 좀 더 포괄적인 ES6 답변입니다.

const localHost = ['localhost', '127.0.0.1', '::1', ''].includes(window.location.hostname) || window.location.hostname.endsWith('.localhost')

언급URL : https://stackoverflow.com/questions/3162457/how-to-check-with-javascript-if-connection-is-local-host

반응형