Як дозволити доступ поза localhost

Як можна дозволити доступ за межами localhost на Angular2? Я можу localhost:3030/panelлегко переміщуватися, але не можу орієнтуватися, коли пишу свій IP-код, наприклад 10.123.14.12:3030/panel/.

Чи можете ви дозволите мені, як це виправити? Я не використовую npm(node ​​project management - node install / node start) для встановлення та запуску проекту.

Якщо хочете, я можу надати своє package.jsonі index.html.

Використання ng serve --host 0.0.0.0дозволить вам підключитися до ng serveвикористання вашого ip замість localhost.

EDIT

У новіших версіях кліпу вам потрібно надати локальну ip-адресу

EDIT 2

У нових версіях cli (я думаю, версії 5 і вище) ви можете використовувати 0.0.0.0як ip знову, щоб розмістити його для всіх, хто має вашу мережу.

Користувачі Mac:

1. Перейдіть до Налаштування системи -> Мережа -> Wi-Fi
2. Скопіюйте IP-адресу нижче Стан (зазвичай 192.168.1.x)
3. Вставте його у свою службу: ng serve --host 192.168.1.x

Тоді ви повинні мати можливість бачити вашу сторінку на інших пристроях 192.168.1.x:4200.

запустити команду

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

це відключить перевірку хоста та дозволить отримати доступ ззовні (замість localhost) з IP-адресою

Ви можете використовувати наступну команду для доступу до свого ip.

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

Якщо ви використовуєте npm і хочете щоразу уникати виконання команди, ми можемо додати наступний рядок до файлу package.json у розділі сценаріїв .

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

Тоді ви можете запустити додаток за допомогою наведеної нижче команди, щоб отримати доступ до іншої системи в тій самій мережі.

npm start

Я просто редагую angular.jsonфайл у своєму проекті, як показано нижче, і він працює

...

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

...

ви також можете проаналізувати весь HTTP-трафік, що працює над вашими тунелями за допомогою ngrok , а потім ви можете відкрити його за допомогоюngrok http --host-header=rewrite 4200

Відкрийте cmd та перейдіть до місця розташування проекту, тобто там, де ви запустите npm install або ng служать для проекту.

а потім запустіть команду - ng serve --host 10.202.32.45де 10.202.32.45ваша IP-адреса.

Ви зможете отримати доступ до своєї сторінки 10.202.32.45:4200там, де 4200 - ваш номер порту.

Примітка. Якщо ви обслуговуєте свою програму за допомогою цієї команди, ви не зможете отримати доступlocalhost:4200

Проблемою була Firewall. Якщо ви перебуваєте в Windows, переконайтеся, що вузол дозволений

Швидке рішення, яке може допомогти комусь:

Додайте цей рядок як значення для початку ng serve --host 0.0.0.0 --disable-host-check у вашомуpackage.json

колишній:

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

А потім просто зробити startабоnpm run start

ви зможете отримати доступ до свого проекту з інших локальних IP-адрес.

Якщо ви зіткнулися з такою ж проблемою всередині Docker, то ви можете скористатися нижче CMDв Dockerfile.

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

Або заповніть Dockerfile

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

Створіть proxy.conf.jsonта вставте цю конфігурацію

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

Замінити:

let url = 'api/'+ your path;

Запустити від CLI:

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

для мене це працює за допомогою "ng serve --open --host 0.0.0.0", але є попередження

ПОПЕРЕДЖЕННЯ: Це простий сервер, який використовується для тестування або налагодження локальних програм Angular. Він не перевірявся з питань безпеки.

Прив’язка цього сервера до відкритого з’єднання може призвести до збитку вашої програми чи комп'ютера. Використання іншого хоста, ніж той, який передано прапорцю "--host", може спричинити проблеми з підключенням до веб-сокета. Вам може знадобитися використовувати "--disableHostCheck", якщо це так.

Жоден package.json не потребує змін.

Для мене це працює з використанням:

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

Ведучий: http: // localhost: 5999 /

• Використовуйте ng serve --host<Your IP> --port<Required if any>.

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

• Тепер ви можете побачити рядок нижче в кінці компіляції.

Angular Live Development Server прослуховує 192.111.1.11:4545, відкрийте браузер http://192.111.1.11:4545/**.

Для людей, які використовують менеджер проектів у вузлах, також буде достатньо цього рядка, що додає до package.json. Для кутових користувачів CLI відповідь mast3rd3mon відповідає дійсності.

Ви можете додати

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

до package.json