Jak zezwolić na dostęp poza localhost

Jak mogę zezwolić na dostęp poza hostem lokalnym w Angular2? Mogę łatwo nawigować pod adresem, localhost:3030/panelale nie mogę nawigować, gdy piszę mój adres IP, taki jak 10.123.14.12:3030/panel/.

Czy mógłbyś mi pozwolić, jak to naprawić? Nie używam npm(zarządzanie projektem węzła - instalacja węzła / uruchomienie węzła) do zainstalowania i uruchomienia projektu.

Jeśli chcesz, mogę podać moje package.jsoni index.html.

Używanie ng serve --host 0.0.0.0pozwoli ci połączyć się z ng serveużywając twojego adresu IP zamiast localhost.

EDYTOWAĆ

W nowszych wersjach CLI musisz zamiast tego podać swój lokalny adres IP

EDYCJA 2

W nowszych wersjach CLI (myślę, że v5 i nowsze) możesz 0.0.0.0ponownie użyć jako adresu IP, aby hostować go dla wszystkich w sieci, z którymi może rozmawiać.

Użytkownicy komputerów Mac:

1. Przejdź do Preferencje systemowe -> Sieć -> Wi-Fi
2. Skopiuj adres IP poniżej Status (zwykle 192.168.1.x)
3. Wklej to w swoim ng służyć jak: ng serve --host 192.168.1.x

Następnie musisz mieć możliwość przeglądania swojej strony na innych urządzeniach 192.168.1.x:4200.

Uruchom polecenie

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

Spowoduje to wyłączenie sprawdzania hosta i umożliwi dostęp z zewnątrz (zamiast lokalnego) z adresem IP

Możesz użyć następującego polecenia, aby uzyskać dostęp za pomocą swojego adresu IP.

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

Jeśli używasz npm i chcesz uniknąć uruchamiania polecenia za każdym razem, możemy dodać następujący wiersz do pliku package.json w sekcji skryptów .

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

Następnie możesz uruchomić aplikację za pomocą poniższego polecenia, aby uzyskać dostęp z innego systemu w tej samej sieci.

npm start

Po prostu edytuję angular.jsonplik w moim projekcie, jak poniżej i działa

...

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

...

możesz również przeszukać cały ruch HTTP przepływający przez twoje tunele za pomocą ngrok , a następnie możesz ujawnić za pomocąngrok http --host-header=rewrite 4200

Otwórz cmd i przejdź do lokalizacji projektu, tj. Gdzie uruchamiasz npm install lub ng służy do projektu.

a następnie uruchom polecenie - ng serve --host 10.202.32.45gdzie 10.202.32.45jest twój adres IP.

Będziesz mógł uzyskać dostęp do swojej strony, 10.202.32.45:4200gdzie 4200 to Twój numer portu.

Uwaga: jeśli obsługujesz swoją aplikację za pomocą tego polecenia, nie będziesz mieć do niej dostępulocalhost:4200

Problemem był Firewall. Jeśli korzystasz z systemu Windows, upewnij się, że węzeł jest dozwolony

Szybkie rozwiązanie, które może komuś pomóc:

Dodaj tę linię jako wartość początkową ng serve --host 0.0.0.0 --disable-host-check w swoimpackage.json

dawny:

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

A potem po prostu zrób startlubnpm run start

będziesz mieć dostęp do swojego projektu z innych lokalnych adresów IP.

Jeśli napotkasz ten sam problem w Docker, możesz użyć poniżej CMDw Dockerfile.

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

Lub uzupełnij plik Dockerfile

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

Utwórz proxy.conf.jsoni wklej tę konfigurację

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

Zastąpić:

let url = 'api/'+ your path;

Uruchom z CLI:

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

dla mnie działa przy użyciu „ng serv --open --host 0.0.0.0”, ale jest ostrzeżenie

OSTRZEŻENIE: jest to prosty serwer do lokalnego testowania lub debugowania aplikacji Angular. Nie został sprawdzony pod kątem problemów z bezpieczeństwem.

Powiązanie tego serwera z otwartym połączeniem może spowodować naruszenie bezpieczeństwa aplikacji lub komputera. Użycie innego hosta niż ten przekazany do flagi „--host” może spowodować problemy z połączeniem w sieci Web. W takim przypadku może być konieczne użycie „--disableHostCheck”.

Żaden plik package.json nie jest konieczny do zmiany.

U mnie działa na:

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

Host: http: // localhost: 5999 /

• Użyj ng serve --host<Your IP> --port<Required if any>.

• ng służyć --host = 192.111.1.11 --port = 4545.

• Możesz teraz zobaczyć poniższą linię na końcu kompilacji.

Angular Live Development Server nasłuchuje na 192.111.1.11:4545, otwórz przeglądarkę na http://192.111.1.11:4545/**.

Dla osób korzystających z node project manager wystarczy dodać ten wiersz do package.json. Dla użytkowników kątowych CLI odpowiedź mast3rd3mon jest prawdziwa.

Możesz dodać

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

to package.json