Jak zezwolić na dostęp poza localhost

184

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.

Tonyukuk
źródło
1
używasz ng służyć?
mast3rd3mon
1
tak, używam serwera ng
Tonyukuk
2
próbowałeś służyć --host 10.123.14.12?
Digvijay
1
Zmęczyłem się serwowaniem i jest napisane: „Muszę być wewnątrz projektu angular-cli, aby użyć polecenia serv”.
Tonyukuk

Odpowiedzi:

338

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ć.

mast3rd3mon
źródło
1
mówi "musisz być wewnątrz projektu angluar - cli, aby użyć polecenia serv" z czerwonym ostrzeżeniem, kiedy piszę ng sreve, a także żółtym komunikatem wskazującym, że używam wersji 6.2.2 Node, która nie będzie obsługiwany w przyszłych wersjach CLI po napisaniu ng
serv
1
po pierwsze, spróbuj zaktualizować węzeł, po drugie, spróbuj ponownie uruchomić terminal / vscode
mast3rd3mon
1
Zaktualizowałem go z pakietu json do wersji 6.0.46 jako „@ types / node”: „6.0.46”, ale nadal otrzymuję tę samą wiadomość
Tonyukuk
1
Nie rozumiem, jak ludzie oddają - głosują na moje pytania i nie wiem, kto to robi. Nawet ty źle rozumiesz pytanie i udzielasz mi złych odpowiedzi, a oni wciąż dają reputację „-”. Sam znalazłem odpowiedź. Miałem dodać „„ server ”:„ webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000 ”,„ do packagejson
Tonyukuk
7
To zadziałało dla mnie:ng serve --open --host 0.0.0.0 --disable-host-check
Jonathan.Brink
39

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.

Sajad
źródło
1
Pracował dla mnie i już nie pracuje. Zastanawiać się dlaczego. Czuję, że próbowałem wszystkiego! Moja zapora jest wyłączona. ng serv --host 10.xxx --disable-host-check / ng serve --host 0.0.0.0 --disable-host-check -> Niedostępne ze zdalnego komputera z systemem Windows, który jest w tej samej sieci co 10.xxx : 4200
Rafaël Moser
Działa dobrze w Angular 7 i MacOS 10.14.6
bks
Na ile to warte, zaakceptowana odpowiedź działa dla mnie na MacOS od października 2019 r.
Alexander Nied
To działa dla mnie, a po przeszukaniu daleko i szeroko, jest to jedyna odpowiedź, jaką widziałem, aby określić ten kluczowy krok: w pasku adresu przeglądarki safari w telefonie iPhone podłącz: 192.168.1.x: 4200, gdzie x = ostatnie cyfry twojego adresu IP. Uwzględnienie „: 4200” było dla mnie różnicą.
9gt53wS
@ RafaëlMoser rozwiązałeś to? Mam ten sam problem i naprawdę nie mam pojęcia.
Maaddy
29

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

Pala
źródło
3
Nie potrzebowałem --disable-host-check. ng serve --host 0.0.0.0dla mnie działa dobrze. Co ma zrobić kontrola hosta?
Andrew
5
Kiedyś potrzebowałem disabled-host-checkinaczej, dostałem wiadomość „Invalid Host header”
GameDroids
czy istnieje sposób, aby zdefiniować to w pliku konfiguracyjnym, aby nie wspominać o nim za każdym razem?
Ayush Kumar
12

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
Kutagolla Mahammad Irshad
źródło
3
Jest teraz -disableHostCheck = true | false w mojej wersji, Angular 8.
Tony
8

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

...

Farzad
źródło
8

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

Zambi
źródło
4

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

Rakesh Ranjan
źródło
Czy jest możliwy dostęp w obie strony?
zishan paya
działa, dziękuję ... chyba szukałem niewłaściwego adresu IP
Tejashri Patange
wiesz, że to brzmi głupio, ale upewnij się, że Twój telefon korzysta z tej samej sieci Wi-Fi, z której korzystasz. Korzystałem z sieci dla gości ... +1 za jedyną odpowiedź, która mi odpowiadała.
greg
3

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

TSR
źródło
Nie byłem w stanie uzyskać dostępu z tej samej sieci nawet po obsłużeniu za pomocą ng serv --host 0.0.0.0. Ale jak wspomniałeś, problemem były uprawnienia do zapory. Dzięki za poświęcenie czasu na udostępnienie tego.
Sandy B
3

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.

Vikash Kumar
źródło
1

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"]
Adiii
źródło
-1

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
Gaurav Srivastava
źródło
-1

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”.

Yonas
źródło
-1

Ż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 /

Konsul
źródło
-1
  • 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/**.

Nanda Kishore Allu
źródło
-3

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

Tonyukuk
źródło