จะตรวจสอบด้วย 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}$/
    )
);

รูปแบบที่สั้นที่สุดโดยใช้กลไกเดียวกันกับสคริปต์อื่น ๆ :

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'))
  )
}

วิธีง่ายๆในการดำเนินการนี้คือเพียงตรวจสอบชื่อโฮสต์กับ 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!");
}

คุณสามารถตรวจพบในโค้ดของคุณหลังหน้าด้วย 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 ระหว่างการพัฒนาล่ะ?
• จะเกิดอะไรขึ้นถ้าคุณต้องการพฤติกรรมที่แตกต่างระหว่าง dev
  ( การตรวจสอบความถูกต้องตรวจสอบความถูกต้องไม่มีการตรวจสอบความถูกต้อง )

วิธีแก้ไขอย่างหนึ่งคือการตั้งค่าแฮชตำแหน่งและตรวจสอบ

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)

ตรวจสอบโดเมน localhost, .local ทั่วไปและไฟล์: (ชื่อโฮสต์ว่าง)

*) ใน Chrome ประสิทธิภาพ[].includes(...)จะดีที่สุด (42 ms) ตามด้วยการวนซ้ำอย่างง่าย (สำหรับในขณะที่) ด้วยการตรวจสอบรายการอาร์เรย์ (119 ms) จากนั้น[].indexOf(...) > -1(289 ms) และสุดท้าย regexp (566 ms) แต่การวัดเหล่านี้มีความสัมพันธ์กันเนื่องจากเบราว์เซอร์ต่างๆได้รับการปรับให้เหมาะสมแตกต่างกัน ใน 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)