So erlauben Sie den Zugriff außerhalb von localhost

182

Wie kann ich den Zugriff außerhalb des lokalen Hosts bei Angular2 zulassen? Ich kann localhost:3030/panelleicht navigieren, aber ich kann nicht navigieren, wenn ich meine IP wie z 10.123.14.12:3030/panel/.

Könnten Sie mir bitte erlauben, wie ich das Problem beheben kann? Ich verwende nicht npm(Knotenprojektverwaltung - Knoteninstallation / Knotenstart), um das Projekt zu installieren und auszuführen.

Wenn Sie möchten, kann ich meine package.jsonund zur Verfügung stellen index.html.

Tonyukuk
quelle
1
Verwenden Sie ng dienen?
Mast3rd3mon
1
Ja, ich benutze ng Server
Tonyukuk
2
Hast du versucht zu dienen - Host 10.123.14.12?
Digvijay
1
Ich bin müde vom Aufschlag und es heißt "Ich muss mich in einem Winkel-Cli-Projekt befinden, um den Aufschlagbefehl verwenden zu können".
Tonyukuk

Antworten:

332

Mit ng serve --host 0.0.0.0können Sie eine Verbindung ng servemit Ihrer IP anstelle von herstellen localhost.

BEARBEITEN

In neueren Versionen der CLI müssen Sie stattdessen Ihre lokale IP-Adresse angeben

BEARBEITEN 2

In neueren Versionen der CLI (ich denke, Version 5 und höher) können Sie sie erneut 0.0.0.0als IP verwenden, um sie für alle in Ihrem Netzwerk zu hosten, mit denen Sie sprechen können.

mast3rd3mon
quelle
1
Es heißt "Sie müssen sich in einem Angluar-Cli-Projekt befinden, um den Serve-Befehl verwenden zu können", mit der roten Warnung beim Schreiben von ng sreve und einer gelben Meldung, die angibt, dass ich Version 6.2.2 von Node ausführe wird in zukünftigen Versionen der CLI nach dem Schreiben von ng serve nicht unterstützt
Tonyukuk
1
Versuchen Sie erstens, den Knoten zu aktualisieren, zweitens versuchen Sie, Ihr Terminal / Ihren
vscode
1
Ich habe es von Paket json auf 6.0.46 als "@ types / node" aktualisiert: "6.0.46", aber immer noch die gleiche Nachricht erhalten
Tonyukuk
1
Ich verstehe nicht, wie Leute meine Fragen beantworten - und ich weiß nicht, wer es tut. Selbst wenn Sie die Frage falsch verstehen und mir falsche Antworten geben, geben sie immer noch den Ruf "-". Ich habe die Antwort selbst gefunden. Ich sollte "" server "hinzufügen:" webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000 "," zu packagejson
Tonyukuk
6
Das hat bei mir funktioniert:ng serve --open --host 0.0.0.0 --disable-host-check
Jonathan.Brink
38

Mac-Benutzer:

  1. Gehen Sie zu Systemeinstellungen -> Netzwerk -> Wi-Fi
  2. Kopieren Sie die IP-Adresse unter Status (normalerweise 192.168.1.x).
  3. Fügen Sie es in Ihre ng dienen dienen wie: ng serve --host 192.168.1.x

Dann müssen Sie in der Lage sein, Ihre Seite auf anderen Geräten durch zu sehen 192.168.1.x:4200.

Sajad
quelle
1
Früher für mich gearbeitet und nicht mehr gearbeitet. Wundern, warum. Ich habe das Gefühl, ich habe alles versucht! Meine Firewall ist deaktiviert. ng serve --host 10.xxx --disable-host-check / ng serve --host 0.0.0.0 --disable-host-check -> Kein Zugriff von einem Windows-Remotecomputer, der sich im selben Netzwerk wie 10.xxx befindet : 4200
Rafaël Moser
Funktioniert gut in Angular 7 und MacOS 10.14.6
bks
Für das, was es wert ist, funktioniert die akzeptierte Antwort für mich unter MacOS ab Oktober 2019.
Alexander Nied
Dies funktioniert für mich und nachdem ich weit und breit gesucht habe, ist es die einzige Antwort, die ich gesehen habe, um diesen Schlüsselschritt anzugeben: In der Adressleiste Ihres iPhone-Safari-Browsers stecken Sie Folgendes ein: 192.168.1.x: 4200, wobei x = letzte Ziffern Ihrer IP-Adresse. Das Einbeziehen des ": 4200" war für mich der Unterschied.
9gt53wS
@ RafaëlMoser hast du es gelöst? Ich habe das gleiche Problem und bin wirklich ahnungslos.
Maaddy
29

Führen Sie den Befehl "ng serve --host = 0.0.0.0 --disable-host-check" aus.

Dadurch wird die Hostprüfung deaktiviert und der Zugriff von außen (statt localhost) mit der IP-Adresse ermöglicht

Palla
quelle
3
Ich brauchte --disable-host-check nicht. ng serve --host 0.0.0.0funktioniert gut für mich. Was soll der Host-Check tun?
Andrew
5
Ich brauchte einmal das, disabled-host-checksonst bekam ich die Nachricht "Ungültiger Host-Header"
GameDroids
Gibt es eine Möglichkeit, es in einer Konfigurationsdatei zu definieren, um zu vermeiden, dass es jedes Mal erwähnt wird?
Ayush Kumar
12

Sie können den folgenden Befehl verwenden, um mit Ihrer IP zuzugreifen.

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

Wenn Sie npm verwenden und vermeiden möchten, dass der Befehl jedes Mal ausgeführt wird, können Sie der Datei package.json im Abschnitt scripts die folgende Zeile hinzufügen .

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

Anschließend können Sie Ihre App mit dem folgenden Befehl ausführen, um vom anderen System im selben Netzwerk darauf zuzugreifen.

npm start
Kutagolla Mahammad Irshad
quelle
3
Es ist jetzt -disableHostCheck = true | false in meiner Version, Angular 8.
Tony
8

Ich bearbeite einfach die angular.jsonDatei in meinem Projekt wie unten und es funktioniert

...

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

...

Farzad
quelle
4

Öffnen Sie cmd und navigieren Sie zum Projektspeicherort, dh wo Sie npm install oder ng serve für das Projekt ausführen.

Führen Sie dann den Befehl aus - ng serve --host 10.202.32.45wo 10.202.32.45ist Ihre IP-Adresse?

Sie können auf Ihre Seite zugreifen, bei der 10.202.32.45:42004200 Ihre Portnummer ist.

Hinweis: Wenn Sie Ihre App mit diesem Befehl bereitstellen, können Sie nicht darauf zugreifenlocalhost:4200

Rakesh Ranjan
quelle
Ist es möglich, in beide Richtungen zuzugreifen?
Zishan Paya
es funktioniert danke ... ich schätze, ich habe nach einer falschen IP-Adresse
gesucht
Ich weiß, dass es albern klingt, aber stellen Sie sicher, dass Ihr Telefon dasselbe WLAN-Netzwerk verwendet wie Ihr Entwicklungsgerät. Ich habe ein Gastnetzwerk verwendet ... +1 für die einzige Antwort, die für mich funktioniert hat.
greg
3

Für das Problem war Firewall. Wenn Sie unter Windows arbeiten, stellen Sie sicher, dass der Knoten zugelassen ist Geben Sie hier die Bildbeschreibung ein

TSR
quelle
Ich konnte nicht auf dasselbe Netzwerk zugreifen, selbst nachdem ich mit ng serve --host 0.0.0.0 bedient hatte. Wie Sie bereits erwähnt haben, war die Firewall-Berechtigung das Problem. Vielen Dank, dass Sie sich die Zeit genommen haben, diese zu teilen.
Sandy B
3

Eine schnelle Lösung, die jemandem helfen könnte:

Fügen Sie diese Zeile als Wert für den Start ng serve --host 0.0.0.0 --disable-host-check in Ihrepackage.json

Ex:

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

Und dann einfach startodernpm run start

Sie können von anderen lokalen IPs auf Ihr Projekt zugreifen.

Vikash Kumar
quelle
0

Erstellen Sie proxy.conf.jsondiese Konfiguration und fügen Sie sie ein

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

Ersetzen:

let url = 'api/'+ your path;

Von der CLI ausführen:

ng serve  --host port.number —-proxy-config proxy.conf.json
Gaurav Srivastava
quelle
0

Für mich funktioniert es mit "ng serve --open --host 0.0.0.0", aber es gibt eine Warnung


WARNUNG: Dies ist ein einfacher Server zum lokalen Testen oder Debuggen von Angular-Anwendungen. Es wurde nicht auf Sicherheitsprobleme überprüft.

Das Binden dieses Servers an eine offene Verbindung kann zu einer Gefährdung Ihrer Anwendung oder Ihres Computers führen. Die Verwendung eines anderen Hosts als dem an das Flag "--host" übergebenen kann zu Problemen mit der Websocket-Verbindung führen. In diesem Fall müssen Sie möglicherweise "--disableHostCheck" verwenden.

Yonas
quelle
0

Kein package.json muss geändert werden.

Bei mir funktioniert es mit:

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

Host: http: // localhost: 5999 /

Oder ohne bestimmten Port:

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

Host: http: // localhost: 4200 /

Es ist möglich, lokale IP vom Computer zu verwenden:

Öffnen Sie den Endtyp Comand Prompt

ipconfig
Schreiben Sie das IPV4 auf

In meinem Fall 192.168.0.14ist mein IPV4, setzen Sie Ihren

ng serve --host = 192.168.0.14 --disable-host-check 

Host: http://192.168.0.14:4200

Konsulat
quelle
0
  • Verwenden Sie ng serve --host<Your IP> --port<Required if any>.

  • ng serve --host = 192.111.1.11 --port = 4545.

  • Sie können jetzt die folgende Zeile am Ende der Kompilierung sehen.

Angular Live Development Server hört auf 192.168.43.96:4545, öffnen Sie Ihren Browser auf http://192.111.1.11:4545/**.

Nanda Kishore Allu
quelle
-3

Für die Benutzer des Knotenprojektmanagers reicht auch diese Zeile aus, die zu package.json hinzugefügt wird. Für eckige CLI-Benutzer ist die Antwort von mast3rd3mon wahr.

Du kannst hinzufügen

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

zu package.json

Tonyukuk
quelle