Làm thế nào để cho phép truy cập bên ngoài localhost

Làm cách nào tôi có thể cho phép truy cập bên ngoài localhost tại Angular2? Tôi có thể điều hướng localhost:3030/paneldễ dàng nhưng tôi không thể điều hướng khi tôi viết IP của mình như 10.123.14.12:3030/panel/.

Bạn có thể vui lòng cho phép tôi làm thế nào để sửa chữa nó? Tôi không sử dụng npm(quản lý dự án nút - cài đặt nút / bắt đầu nút) để cài đặt và chạy dự án.

Nếu bạn muốn, tôi có thể cung cấp của tôi package.jsonvà index.html.

Sử dụng ng serve --host 0.0.0.0sẽ cho phép bạn kết nối với việc ng servesử dụng ip của bạn thay vì localhost.

BIÊN TẬP

Trong các phiên bản mới hơn của cli, thay vào đó bạn phải cung cấp địa chỉ IP cục bộ của mình

CHỈNH SỬA 2

Trong các phiên bản mới hơn của cli (tôi nghĩ v5 trở lên), bạn có thể sử dụng lại 0.0.0.0làm ip để lưu trữ nó cho bất kỳ ai trên mạng của bạn nói chuyện.

Người dùng Mac:

1. Chuyển đến Tùy chọn hệ thống -> Mạng -> Wi-Fi
2. Sao chép địa chỉ IP bên dưới Trạng thái (Thông thường 192.168.1.x)
3. Dán nó trong ng của bạn phục vụ như: ng serve --host 192.168.1.x

Sau đó, bạn phải có thể xem trang của bạn trên các thiết bị khác thông qua 192.168.1.x:4200.

chạy lệnh

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

điều này sẽ vô hiệu hóa kiểm tra máy chủ và cho phép truy cập từ bên ngoài (thay vì localhost) bằng địa chỉ IP

Bạn có thể sử dụng lệnh sau để truy cập bằng ip của mình.

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

Nếu bạn đang sử dụng npm và muốn tránh chạy lệnh mỗi lần, chúng ta có thể thêm dòng sau vào tệp pack.json trong phần script .

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

Sau đó, bạn có thể chạy ứng dụng của mình bằng lệnh bên dưới để được truy cập từ hệ thống khác trong cùng mạng.

npm start

Tôi chỉ chỉnh sửa angular.json tập tin trong dự án của tôi như dưới đây và nó hoạt động

...

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

...

bạn cũng có thể xem xét tất cả lưu lượng HTTP đang chạy trên các đường hầm của mình bằng ngrok , sau đó bạn có thể hiển thị bằng cách sử dụngngrok http --host-header=rewrite 4200

Mở cmd và điều hướng đến vị trí dự án tức là nơi bạn chạy cài đặt npm hoặc ng phục vụ cho dự án.

và sau đó chạy lệnh - ng serve --host 10.202.32.45nơi10.202.32.45 địa chỉ IP của bạn .

Bạn sẽ có thể truy cập trang của bạn tại 10.202.32.45:4200 4200 là số cổng của bạn.

Lưu ý: Nếu bạn phục vụ ứng dụng của mình bằng lệnh này thì bạn sẽ không thể truy cậplocalhost:4200

Đối với vấn đề là Tường lửa. Nếu bạn đang ở trên Windows, hãy đảm bảo rằng nút được cho phép thông qua

Một giải pháp nhanh chóng có thể giúp được ai đó:

Thêm dòng này như giá trị cho sự khởi đầu ng serve --host 0.0.0.0 --disable-host-check trong bạnpackage.json

Ví dụ:

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

Và sau đó chỉ cần làm starthoặcnpm run start

bạn sẽ có thể truy cập dự án của bạn từ các IP địa phương khác.

Nếu bạn gặp phải vấn đề tương tự bên trong Docker, thì bạn có thể sử dụng bên dưới CMDtrong Dockerfile.

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

Hoặc hoàn thành Dockerfile

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

Tạo proxy.conf.jsonvà dán cấu hình này

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

Thay thế:

let url = 'api/'+ your path;

Chạy từ CLI:

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

Đối với tôi nó hoạt động bằng cách sử dụng "ng phục vụ --open --host 0.0.0.0" nhưng có một cảnh báo

CẢNH BÁO: Đây là một máy chủ đơn giản để sử dụng để kiểm tra hoặc gỡ lỗi các ứng dụng Angular cục bộ. Nó đã không được xem xét cho các vấn đề bảo mật.

Liên kết máy chủ này với một kết nối mở có thể dẫn đến việc xâm phạm ứng dụng hoặc máy tính của bạn. Sử dụng một máy chủ khác với máy chủ được chuyển đến cờ "--host" có thể dẫn đến các sự cố kết nối websocket. Bạn có thể cần phải sử dụng "--disablehostCheck" nếu đó là trường hợp.

Không có gói.json là cần thiết để thay đổi.

Đối với tôi nó hoạt động bằng cách sử dụng:

ng phục vụ --host = 0.0.0.0 --port = 5999 --disable-host-check

Máy chủ: http: // localhost: 5999 /

• Sử dụng ng serve --host<Your IP> --port<Required if any>.

• ng phục vụ --host = 192.111.1.11 --port = 4545.

• Bây giờ bạn có thể thấy dòng dưới đây ở phần cuối của quá trình biên dịch.

Angular Live Development Server đang nghe trên 192.111.1.11:4545, mở trình duyệt của bạn trên http://192.111.1.11:4545/**.

Đối với những người đang sử dụng trình quản lý dự án nút, dòng này thêm vào gói.json là đủ. Đối với người dùng CLI góc cạnh, câu trả lời của mast3rd3mon là đúng.

Bạn có thể thêm

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

đến pack.json