Localhost dışında erişime nasıl izin verilir?


184

Angular2'de localhost dışında erişime nasıl izin verebilirim? localhost:3030/panelKolayca gezinebilirim ama IP adresimi yazarken gezinemiyorum 10.123.14.12:3030/panel/.

Lütfen nasıl düzelteceğime izin verir misiniz? npmProjeyi yüklemek ve çalıştırmak için (düğüm proje yönetimi - düğüm yükleme / düğüm başlangıcı) kullanmıyorum .

İstersen benim package.jsonve sağlayabilirim index.html.


1
porsiyon kullanıyor musun?
mast3rd3mon

1
evet sunucuyu kullanıyorum
Tonyukuk

2
--host 10.123.14.12 servis etmeyi denediniz mi?
Digvijay

1
Hizmetten yoruldum ve "Sunum komutunu kullanmak için sıralı bir açısal proje içinde olmalıyım" diyor.
Tonyukuk

Yanıtlar:


338

Kullanarak ng serve --host 0.0.0.0, ng serveyerine ip kullanarak bağlanmanıza izin verir localhost.

DÜZENLE

Klibin yeni sürümlerinde, bunun yerine yerel ip adresinizi girmeniz gerekir

DÜZENLEME 2

Cli'nin yeni sürümlerinde (sanırım v5 ve üstü) 0.0.0.0ağınızdaki herkesin konuşması için onu barındırmak için tekrar ip olarak kullanabilirsiniz .


1
sreve yazarken kırmızı uyarı ve ayrıca Node'un 6.2.2 sürümünü çalıştırdığımı belirten sarı bir mesajla "servis komutunu kullanmak için bir angluar - cli projesinin içinde olmalısınız" yazıyor. hizmet yazdıktan sonra CLI'nin gelecek sürümlerinde desteklenmeyecek
Tonyukuk

1
önce, düğümü güncellemeyi deneyin, ikinci, terminalinizi / vscode'unuzu yeniden başlatmayı deneyin
mast3rd3mon

1
Paketi json'dan 6.0.46'ya "@ types / node": "6.0.46" olarak güncelledim, ancak yine de aynı mesajı alıyorum
Tonyukuk

1
İnsanların nasıl verdiğini anlamıyorum - sorularıma oy verin ve bunu kimin yaptığını bilmiyorum. Soruyu yanlış anlıyorsanız ve bana yanlış cevaplar verseniz bile yine de “-” ün veriyorlar. Cevabı kendim buldum. Pakete "" server ":" webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000 "," eklemem gerekiyordu
Tonyukuk

7
Bu benim için çalıştı:ng serve --open --host 0.0.0.0 --disable-host-check
Jonathan.Brink

39

Mac kullanıcıları:

  1. Sistem Tercihleri ​​-> Ağ -> Wi-Fi'ye gidin
  2. Aşağıdaki IP adresini kopyala Status (Genellikle 192.168.1.x)
  3. Aşağıdaki gibi servisinize yapıştırın: ng serve --host 192.168.1.x

Ardından, sayfanızı diğer cihazlarda aracılığıyla görebilmeniz gerekir 192.168.1.x:4200.


1
Eskiden benim için çalışıyordum ve artık çalışmıyordum. Nedenini merak etmek. Her şeyi denediğimi hissediyorum! Güvenlik duvarım devre dışı. Sunum --host 10.xxx --disable-host-check / ng Sunum --host 0.0.0.0 --disable-host-check -> 10.xxx ile aynı ağda bulunan bir Windows uzak makineden erişilemez : 4200
Rafaël Moser

Açısal 7 ve MacOS 10.14.6
bks

Değeri ne olursa olsun, kabul edilen cevap benim için Ekim 2019'dan itibaren MacOS'ta çalışıyor.
Alexander Nied

Bu benim için çalışıyor ve uzak ve geniş aradıktan sonra, bu anahtar adımı belirtmek için gördüğüm tek cevap: iphone safari tarayıcınızın adres çubuğuna takın: 192.168.1.x: 4200, burada x = ip adresinizin son haneleri. Benim için fark ": 4200" oldu.
9gt53wS

@ RafaëlMoser çözdün mü? Aynı sorunum var ve gerçekten beceriksizim.
Maaddy

29

komutu çalıştır

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

bu, ana makine kontrolünü devre dışı bırakır ve IP adresiyle dışarıdan (localhost yerine) erişime izin verir


3
Ben - disisable-host-check gerek yoktu. ng serve --host 0.0.0.0benim için iyi çalışıyor. Ana bilgisayar kontrolünün ne yapması gerekiyor?
Andrew

5
Bir kez ihtiyacım vardı disabled-host-checkaksi takdirde "Geçersiz Ana bilgisayar üstbilgisi" mesajını aldım
GameDroids

her zaman söz önlemek için bir yapılandırma dosyasında tanımlamak için bir yolu var mı?
Ayush Kumar

12

İp'inize erişmek için aşağıdaki komutu kullanabilirsiniz.

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

Npm kullanıyorsanız ve komutu her seferinde çalıştırmaktan kaçınmak istiyorsanız, komut dosyaları bölümündeki package.json dosyasına aşağıdaki satırı ekleyebiliriz .

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

Ardından, aynı ağdaki diğer sistemden erişilecek aşağıdaki komutu kullanarak uygulamanızı çalıştırabilirsiniz.

npm start

3
Şimdi -disableHostCheck = true | Versiyonumda yanlış, Açısal 8.
Tony

8

Projemdeki angular.jsondosyayı aşağıdaki gibi düzenliyorum ve çalışıyor

...

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

...


8

ngrok kullanarak tünelleriniz üzerinden çalışan tüm HTTP trafiğini de inceleyebilir , ardındanngrok http --host-header=rewrite 4200


4

Cmd'yi açın ve proje konumuna gidin, yani proje için npm kurulumunu veya hizmetini çalıştırdığınız yerde.

ve sonra komutu çalıştırın - IP adresiniz ng serve --host 10.202.32.45nerede 10.202.32.45.

10.202.32.45:42004200 numaralı bağlantı noktanızdan sayfanıza erişebileceksiniz .

Not: Uygulamanızı bu komutu kullanarak sunarsanız, erişemezsiniz.localhost:4200


Her iki yöne de erişim mümkün mü?
zishan paya


kulağa aptalca geldiğini biliyorum, ancak telefonunuzun makine ile aynı wifi ağını kullandığından emin olun. Misafir ağı kullanıyordum ... +1 benim için işe yarayan tek cevap için.
greg

3

Sorun Güvenlik Duvarı idi. Windows kullanıyorsanız, düğüme izin verildiğinden emin olun. resim açıklamasını buraya girin


Ng - 0.0.0.0 hizmeti ile hizmet ettikten sonra bile aynı ağdan erişemedim. Ancak güvenlik duvarı izni sizin belirttiğiniz gibi oldu. Bunu paylaşmak için zaman ayırdığınız için teşekkür ederiz.
Sandy B

3

Birine yardımcı olabilecek hızlı bir çözüm:

Bu satırı ng serve --host 0.0.0.0 --disable-host-check ,package.json

örn:

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

Ve sonra startya sadecenpm run start

projenize diğer yerel IP'lerden erişebileceksiniz.


1

Docker içinde aynı sorunla karşılaşırsanız CMD, Dockerfile içinde aşağıda kullanabilirsiniz .

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

Veya Dockerfile'ı tamamlayın

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

-1

proxy.conf.jsonBu yapılandırmayı oluştur ve yapıştır

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

Değiştir:

let url = 'api/'+ your path;

CLI'den çalıştır:

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

-1

benim için "ng serve --open --host 0.0.0.0" kullanarak çalışır ama bir uyarı var


UYARI: Bu, açısal uygulamaları yerel olarak test etmek veya hata ayıklamak için kullanılan basit bir sunucudur. Güvenlik sorunları için incelenmedi.

Bu sunucuyu açık bir bağlantıya bağlamak uygulamanızın veya bilgisayarınızın güvenliğini tehlikeye atabilir. "--Host" bayrağına geçirilenden farklı bir ana bilgisayar kullanılması websocket bağlantı sorunlarına neden olabilir. Bu durumda "--disableHostCheck" komutunu kullanmanız gerekebilir.


-1

Hiçbir package.json değiştirmek gerekmez.

Benim için çalışıyor:

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

Ana bilgisayar: http: // localhost: 5999 /


-1
  • Kullanın ng serve --host<Your IP> --port<Required if any>.

  • porsiyon --host = 192.111.1.11 - port = 4545.

  • Şimdi derlemenin sonunda aşağıdaki satırı görebilirsiniz.

Angular Live Development Server 192.111.1.11:4545 dinliyor, tarayıcınızı http://192.111.1.11:4545/** açınız .


-3

Düğüm proje yöneticisini kullanan kişiler için, package.json'a eklenen bu satır da yeterli olacaktır. Açısal CLI kullanıcıları için mast3rd3mon'un yanıtı doğrudur.

Ekleyebilirsin

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

to package.json

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.