So erlauben Sie den Zugriff außerhalb von localhost

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.

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.

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.

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

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

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"
      },

...

Sie können auch den gesamten HTTP-Verkehr, der über Ihre Tunnel läuft , mit ngrok überprüfen und dann mit verfügbar machenngrok http --host-header=rewrite 4200

Ö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

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

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.

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

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.

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

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

• 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/**.

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