Cara mengizinkan akses di luar localhost

184

Bagaimana saya bisa mengizinkan akses di luar localhost di Angular2? Saya dapat menavigasi dengan localhost:3030/panelmudah tetapi saya tidak dapat menavigasi ketika saya menulis IP seperti 10.123.14.12:3030/panel/.

Bisakah Anda mengizinkan saya cara memperbaikinya? Saya tidak menggunakan npm(mengelola proyek simpul - install node / start node) untuk menginstal dan menjalankan proyek.

Jika Anda mau, saya bisa menyediakan package.jsondan index.html.

Tonyukuk
sumber
1
apakah Anda menggunakan layanan ng?
mast3rd3mon
1
ya saya menggunakan server ng
Tonyukuk
2
Apakah Anda mencoba ng serve --host 10.123.14.12?
Digvijay
1
Saya lelah melayani dan mengatakan "Saya harus berada di dalam proyek sudut - CLI di ordre untuk menggunakan perintah servis".
Tonyukuk

Jawaban:

338

Menggunakan ng serve --host 0.0.0.0akan memungkinkan Anda untuk terhubung ke ng servemenggunakan ip Anda, bukan localhost.

EDIT

Di versi yang lebih baru dari cli, Anda harus memberikan alamat ip lokal Anda sebagai gantinya

EDIT 2

Dalam versi yang lebih baru dari cli (saya pikir v5 dan lebih tinggi), Anda dapat menggunakan 0.0.0.0ip lagi untuk menjadi tuan rumah bagi siapa saja di jaringan Anda untuk diajak bicara.

mast3rd3mon
sumber
1
ia mengatakan "Anda harus berada di dalam proyek angluar-cli untuk menggunakan perintah melayani" dengan peringatan merah ketika saya menulis ng sreve dan juga pesan kuning yang menunjukkan bahwa saya menjalankan versi 6.2.2 dari Node, yang tidak akan didukung dalam versi CLI yang akan datang setelah penulisan layanan
Tonyukuk
1
pertama, coba perbarui node, kedua, coba mulai ulang terminal / vscode Anda
mast3rd3mon
1
Saya memperbaruinya dari paket json ke 6.0.46 sebagai "@ types / node": "6.0.46", tetapi masih mendapatkan pesan yang sama
Tonyukuk
1
Saya tidak mengerti bagaimana orang memberikan suara untuk pertanyaan saya dan saya tidak tahu siapa yang melakukannya. Bahkan Anda mengerti pertanyaan yang salah dan memberi saya jawaban yang salah mereka masih memberi "-" reputasi. Saya menemukan jawabannya sendiri. Aku seharusnya untuk menambahkan "" server ": "Webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"," untuk packagejson
Tonyukuk
7
Ini bekerja untuk saya:ng serve --open --host 0.0.0.0 --disable-host-check
Jonathan.
39

Pengguna Mac:

  1. Pergi ke System Preferences -> Network -> Wi-Fi
  2. Salin alamat IP di bawah Status (Biasanya 192.168.1.x)
  3. Rekatkan ke dalam layanan Anda seperti: ng serve --host 192.168.1.x

Maka Anda harus dapat melihat halaman Anda di perangkat lain melalui 192.168.1.x:4200.

Sajad
sumber
1
Dulu bekerja untuk saya dan tidak bekerja lagi. Ingin tahu mengapa. Saya merasa seperti saya sudah mencoba semuanya! Firewall saya dinonaktifkan. ng serve --host 10.xxx --disable-host-check / ng serve --host 0.0.0.0 --disable-host-check -> Tidak dapat diakses dari mesin remote Windows yang ada di jaringan yang sama dengan 10.xxx : 4200
Rafaël Moser
Berfungsi dengan baik dalam Angular 7, dan MacOS 10.14.6
bks
Untuk apa nilainya, jawaban yang diterima bekerja untuk saya di MacOS pada Oktober 2019.
Alexander Nied
Ini berfungsi untuk saya, dan setelah mencari jauh dan luas, itu adalah satu-satunya jawaban yang saya lihat untuk menentukan langkah kunci ini: di bilah alamat browser safari iphone Anda, pasang: 192.168.1.x: 4200, di mana x = digit terakhir dari alamat ip Anda. Termasuk ": 4200" adalah perbedaan bagi saya.
9gt53wS
@ RafaëlMoser apakah Anda menyelesaikannya? Saya memiliki masalah yang sama dan saya benar-benar hebat.
Maaddy
29

jalankan perintah

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

ini akan menonaktifkan pemeriksaan host dan memungkinkan akses dari luar (bukan localhost) dengan alamat IP

Palla
sumber
3
Saya tidak perlu --disable-host-check. ng serve --host 0.0.0.0bekerja dengan baik untuk saya. Apa yang seharusnya dilakukan oleh tuan rumah?
Andrew
5
Saya pernah membutuhkan disabled-host-checksebaliknya saya mendapat pesan "Invalid Host header"
GameDroids
apakah ada cara untuk mendefinisikannya dalam file konfigurasi untuk menghindari menyebutkannya setiap kali?
Ayush Kumar
12

Anda dapat menggunakan perintah berikut untuk mengakses dengan ip Anda.

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

Jika Anda menggunakan npm dan ingin menghindari menjalankan perintah setiap waktu, kami dapat menambahkan baris berikut ke file package.json di bagian skrip .

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

Kemudian Anda dapat menjalankan aplikasi Anda menggunakan perintah di bawah ini untuk diakses dari sistem lain di jaringan yang sama.

npm start
Kutagolla Mahammad Irshad
sumber
3
Sekarang -disableHostCheck = true | false dalam versi saya, Angular 8.
Tony
8

Saya hanya mengedit angular.jsonfile di proyek saya seperti di bawah ini dan berfungsi

...

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

...

Farzad
sumber
8

Anda juga dapat mengintrospeksi semua lalu lintas HTTP yang berjalan di terowongan Anda menggunakan ngrok , lalu Anda dapat mengekspos menggunakanngrok http --host-header=rewrite 4200

Zombie
sumber
4

Buka cmd dan arahkan ke lokasi proyek yaitu di mana Anda menjalankan instalasi npm atau ng servis untuk proyek tersebut.

dan kemudian jalankan perintah - di ng serve --host 10.202.32.45mana 10.202.32.45alamat IP Anda.

Anda akan dapat mengakses halaman Anda di 10.202.32.45:4200mana 4200 adalah nomor port Anda.

Catatan: Jika Anda melayani aplikasi menggunakan perintah ini maka Anda tidak akan dapat mengakseslocalhost:4200

Rakesh Ranjan
sumber
Apakah mungkin mengakses dua arah?
zishan paya
ini bekerja terima kasih .. saya kira saya melihat alamat ip yang salah
Tejashri Patange
tahu kedengarannya konyol, tetapi pastikan ponsel Anda menggunakan jaringan wifi yang sama seperti mesin Anda. Saya menggunakan jaringan tamu ... +1 untuk satu-satunya jawaban yang berfungsi untuk saya.
greg
3

Untuk masalahnya adalah Firewall. Jika Anda menggunakan Windows, pastikan simpul diizinkan masuk masukkan deskripsi gambar di sini

TSR
sumber
Saya tidak dapat mengakses dari jaringan yang sama bahkan setelah disajikan dengan ng serve --host 0.0.0.0. Tetapi izin firewall adalah masalah seperti yang Anda sebutkan. Terima kasih telah meluangkan waktu untuk membagikan yang ini.
Sandy B
3

Solusi cepat yang mungkin membantu seseorang:

Tambahkan baris ini sebagai nilai untuk memulai ng serve --host 0.0.0.0 --disable-host-check dipackage.json

ex:

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

Dan kemudian lakukan startataunpm run start

Anda akan dapat mengakses proyek Anda dari IP lokal lainnya.

Vikash Kumar
sumber
1

Jika Anda menghadapi masalah yang sama di dalam Docker, maka Anda dapat menggunakan CMDdi bawah ini di Dockerfile.

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

Atau lengkapi Dockerfile

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

Buat proxy.conf.jsondan tempel konfigurasi ini

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

Menggantikan:

let url = 'api/'+ your path;

Jalankan dari CLI:

ng serve  --host port.number —-proxy-config proxy.conf.json
Gaurav Srivastava
sumber
-1

bagi saya ini berfungsi menggunakan "ng serve --open --host 0.0.0.0" tetapi ada peringatan


PERINGATAN: Ini adalah server sederhana untuk digunakan dalam menguji atau men-debug aplikasi Angular secara lokal. Belum ditinjau untuk masalah keamanan.

Mengikat server ini ke koneksi terbuka dapat mengakibatkan kompromi aplikasi atau komputer Anda. Menggunakan host yang berbeda dari yang diteruskan ke bendera "--host" dapat menyebabkan masalah koneksi websocket. Anda mungkin perlu menggunakan "--disableHostCheck" jika itu masalahnya.

Yonas
sumber
-1

Tidak ada package.json yang perlu diubah.

Bagi saya ini berfungsi menggunakan:

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

Host: http: // localhost: 5999 /

Consule
sumber
-1
  • Gunakan ng serve --host<Your IP> --port<Required if any>.

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

  • Anda sekarang dapat melihat baris di bawah ini di akhir kompilasi.

Server Pengembangan Langsung Angular mendengarkan pada 192.111.1.11:4545, buka browser Anda di http://192.111.1.11:4545/**.

Nanda Kishore Allu
sumber
-3

Untuk orang-orang yang menggunakan manajer proyek simpul, juga baris ini menambahkan ke package.json akan cukup. Untuk pengguna CLI sudut, jawaban mast3rd3mon benar.

Anda dapat menambahkan

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

ke package.json

Tonyukuk
sumber