วิธีอนุญาตการเข้าถึงภายนอก localhost

ฉันจะอนุญาตการเข้าถึงภายนอก localhost ที่ Angular2 ได้อย่างไร ฉันสามารถนำทางที่localhost:3030/panelได้อย่างง่ายดาย แต่ฉันไม่สามารถนำทางเมื่อผมเขียน IP 10.123.14.12:3030/panel/ของฉันเช่น

คุณช่วยให้ฉันแก้ไขได้มั้ย ฉันไม่ได้ใช้npm(การจัดการโปรเจ็กต์โหนด - การติดตั้งโหนด / การเริ่มทำงานโหนด) เพื่อติดตั้งและรันโปรเจ็กต์

หากคุณต้องการฉันสามารถให้ฉันและpackage.jsonindex.html

การใช้ng serve --host 0.0.0.0จะช่วยให้คุณเชื่อมต่อกับng serveการใช้ IP localhostของคุณแทน

แก้ไข

ใน cli รุ่นที่ใหม่กว่าคุณต้องระบุที่อยู่ ip ของคุณแทน

แก้ไข 2

ใน cli เวอร์ชันใหม่กว่า (ฉันคิดว่า v5 ขึ้นไป) คุณสามารถใช้0.0.0.0เป็น ip อีกครั้งเพื่อโฮสต์สำหรับทุกคนในเครือข่ายของคุณเพื่อพูดคุย

ผู้ใช้ Mac:

1. ไปที่การตั้งค่าระบบ -> เครือข่าย -> Wi-Fi
2. คัดลอกที่อยู่ IP ด้านล่างสถานะ (ปกติ 192.168.1.x)
3. วางไว้ใน ng ของคุณให้บริการเช่น: ng serve --host 192.168.1.x

แล้วคุณจะต้องสามารถที่จะเห็นหน้าของคุณบนอุปกรณ์อื่น ๆ 192.168.1.x:4200ผ่านทาง

เรียกใช้คำสั่ง

ng serve --host=0.0.0.0 --disable-host-check

สิ่งนี้จะปิดใช้งานการตรวจสอบโฮสต์และอนุญาตให้เข้าถึงจากภายนอก (แทนที่จะเป็น localhost) ด้วยที่อยู่ IP

คุณสามารถใช้คำสั่งต่อไปนี้เพื่อเข้าถึงด้วย ip ของคุณ

ng serve --host 0.0.0.0 --disable-host-check

หากคุณใช้ npm และต้องการหลีกเลี่ยงการรันคำสั่งทุกครั้งเราสามารถเพิ่มบรรทัดต่อไปนี้ในไฟล์package.jsonในส่วนสคริปต์

"scripts": {
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...
}

จากนั้นคุณสามารถเรียกใช้แอปโดยใช้คำสั่งด้านล่างเพื่อเข้าถึงได้จากระบบอื่นในเครือข่ายเดียวกัน

npm start

ฉันเพิ่งแก้ไขangular.jsonไฟล์ในโครงการของฉันตามด้านล่างและใช้งานได้

...

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "project:build",
        "host": "0.0.0.0"
      },

...

นอกจากนี้คุณยังสามารถพิจารณาการรับส่งข้อมูล HTTP ทั้งหมดที่ทำงานบนอุโมงค์ของคุณโดยใช้ngrok จากนั้นคุณสามารถแสดงการใช้ngrok http --host-header=rewrite 4200

เปิด cmd และไปที่ที่ตั้งโครงการเช่นที่คุณเรียกใช้การติดตั้ง npm หรือให้บริการสำหรับโครงการ

จากนั้นเรียกใช้คำสั่ง - ng serve --host 10.202.32.45ที่10.202.32.45อยู่ IP ของคุณอยู่ที่ไหน

คุณจะสามารถเข้าถึงหน้าเว็บของคุณได้โดย10.202.32.45:4200ที่ 4200 เป็นหมายเลขพอร์ตของคุณ

หมายเหตุ: หากคุณให้บริการแอปของคุณโดยใช้คำสั่งนี้คุณจะไม่สามารถเข้าถึงได้localhost:4200

สำหรับปัญหาคือไฟร์วอลล์ หากคุณใช้ Windows ให้ตรวจสอบว่าได้รับอนุญาตให้ใช้โหนดได้

ทางออกที่รวดเร็วที่อาจช่วยใครบางคน:

เพิ่มบรรทัดนี้เป็นค่าเริ่มต้นng serve --host 0.0.0.0 --disable-host-check ของคุณpackage.json

อดีต:

{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}

และจากนั้นก็ทำstartหรือnpm run start

คุณจะสามารถเข้าถึงโครงการของคุณจาก IP ท้องถิ่นอื่น ๆ

หากคุณประสบปัญหาเดียวกันภายใน Docker คุณสามารถใช้ด้านล่างCMDใน Dockerfile

CMD ["ng", "serve", "--host", "0.0.0.0"]

หรือ Dockerfile ที่สมบูรณ์

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

สร้างproxy.conf.jsonและวางการกำหนดค่านี้

{  
"/api/*":
    {    
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

แทนที่:

let url = 'api/'+ your path;

เรียกใช้จาก CLI:

ng serve  --host port.number —-proxy-config proxy.conf.json

สำหรับฉันมันทำงานโดยใช้ "ng เสิร์ฟ - เปิด - โฮสต์ 0.0.0.0" แต่มีคำเตือน

คำเตือน: นี่เป็นเซิร์ฟเวอร์ง่าย ๆ สำหรับใช้ในการทดสอบหรือการดีบักแอปพลิเคชันเชิงมุมในเครื่อง มันไม่ได้รับการตรวจสอบสำหรับปัญหาด้านความปลอดภัย

การผูกเซิร์ฟเวอร์นี้กับการเชื่อมต่อแบบเปิดอาจส่งผลให้แอปพลิเคชันหรือคอมพิวเตอร์ของคุณถูกโจมตี การใช้โฮสต์อื่นที่ไม่ใช่โฮสต์ที่ส่งไปยังแฟล็ก "--host" อาจทำให้เกิดปัญหาการเชื่อมต่อกับ websocket คุณอาจต้องใช้ "--disableHostCheck" หากเป็นกรณีนี้

ไม่จำเป็นต้องเปลี่ยน package.json

สำหรับฉันมันใช้งานได้:

ng เสิร์ฟ - โฮสต์ = 0.0.0.0 - พอร์ต = 5999 - ปิดการใช้งานโฮสต์ตรวจสอบ

โฮสต์: http: // localhost: 5999 /

• ng serve --host<Your IP> --port<Required if any>ใช้

• ng ให้บริการ - โฮสต์ = 192.111.1.11 - พอร์ต = 4545

• ตอนนี้คุณสามารถเห็นบรรทัดด้านล่างในตอนท้ายของการรวบรวม

Angular Live Development Server กำลังฟัง 192.111.1.11:4545 เปิดเบราว์เซอร์ของคุณในhttp://192.111.1.11:4545/**

สำหรับผู้ที่ใช้ตัวจัดการโปรเจ็กต์โหนดการเพิ่มบรรทัดนี้ใน package.json ก็เพียงพอแล้ว สำหรับผู้ใช้งานเชิงมุม CLI คำตอบของ mast3rd3mon นั้นเป็นความจริง

คุณสามารถเพิ่ม

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

ถึง package.json