Как разрешить доступ вне локального хоста

184

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

Не могли бы вы позволить мне, как это исправить? Я не использую npm(управление проектом узла - установка узла / запуск узла) для установки и запуска проекта.

Если хотите, я могу предоставить свои package.jsonи index.html.

Тоньюкук
источник
1
вы используете нг служить?
mast3rd3mon
1
да я использую нг сервера
Тоньюкук
2
Вы пробовали ng serve --host 10.123.14.12?
Digvijay
1
Я устал от подачи, и он говорит: «Я должен быть внутри углового проекта, чтобы использовать команду подачи».
Тоньюкук

Ответы:

338

Использование ng serve --host 0.0.0.0позволит вам подключиться к ng serveиспользованию вашего IP вместо localhost.

РЕДАКТИРОВАТЬ

В более новых версиях Cli вместо этого вы должны указать свой локальный IP-адрес.

РЕДАКТИРОВАТЬ 2

В более новых версиях cli (я думаю, v5 и выше) вы можете 0.0.0.0снова использовать его как ip, чтобы разместить его в сети для любого человека в вашей сети.

mast3rd3mon
источник
1
он говорит: «Вы должны быть внутри проекта angluar-cli, чтобы использовать команду serve» с красным предупреждением, когда я пишу ng sreve, а также желтым сообщением, которое указывает, что я запускаю версию 6.2.2 Node, которая не будет поддерживаться в будущих версиях CLI после написания нг служить
Тоньюкук
1
во-первых, попробуйте обновить узел, во-вторых, попробуйте перезапустить ваш терминал / vscode
mast3rd3mon
1
Я обновил его из пакета в формате JSON 6.0.46 , как «@ типов / узел»: «6.0.46», но все еще получаю такое же сообщение
Тоньюкук
1
Я не понимаю, как люди дают - голосуйте за мои вопросы, и я не знаю, кто это делает. Даже вы неправильно понимаете вопрос и даете мне неправильные ответы, они все равно дают "-" репутацию. Я нашел ответ сам. Я должен был добавить "" сервер ": "WebPack-DEV-сервер --inline --progress --host 0.0.0.0 --port 3000"," на packagejson
Тоньюкук
7
Это сработало для меня:ng serve --open --host 0.0.0.0 --disable-host-check
Джонатан
39

Пользователи Mac:

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

Тогда вы сможете увидеть свою страницу на других устройствах через 192.168.1.x:4200.

Саяд
источник
1
Раньше работал на меня и больше не работал. Интересно, почему. Я чувствую, что перепробовал все! Мой брандмауэр отключен. ng serve --host 10.xxx --disable-host-check / ng serve --host 0.0.0.0 --disable-host-check -> Недоступно с удаленной машины Windows, которая находится в одной сети с 10.xxx : 4200
Рафаэль Мозер
Хорошо работает в Angular 7 и MacOS 10.14.6
bks
Что бы это ни стоило, принятый ответ работает для меня на MacOS с октября 2019 года.
Александр Нид
Это работает для меня, и после поиска по всему, это единственный ответ, который я видел, чтобы указать этот ключевой шаг: в адресной строке браузера iphone Safari, подключите: 192.168.1.x: 4200, где x = последние цифры вашего IP-адреса. В том числе ": 4200" была разница для меня.
9gt53wS
@ RafaëlMoser ты это решил? У меня та же проблема, и я на самом деле ничего не знаю.
Мэдди
30

Команда выполнения

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

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

Palla
источник
3
Мне не нужно --disable-host-check. ng serve --host 0.0.0.0у меня отлично работает Что должна делать проверка хоста?
Андрей
5
Мне на этот раз понадобилось, disabled-host-checkиначе я получил сообщение «Invalid Host header»
GameDroids
Есть ли способ определить его в файле конфигурации, чтобы не упоминать его каждый раз?
Аюш Кумар
12

Вы можете использовать следующую команду для доступа к вашему 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
Кутаголла Мухаммед Иршад
источник
3
Теперь это -disableHostCheck = true | false в моей версии, Angular 8.
Тони
8

Я просто редактирую angular.jsonфайл в моем проекте, как показано ниже, и он работает

...

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

...

Farzad
источник
8

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

Зомби
источник
4

Откройте cmd и перейдите к местоположению проекта, т.е. где вы запускаете npm install или ng serve для проекта.

и затем выполните команду - ng serve --host 10.202.32.45где 10.202.32.45ваш IP-адрес.

Вы сможете получить доступ к своей странице, 10.202.32.45:4200где 4200 - номер вашего порта.

Примечание. Если вы обслуживаете свое приложение с помощью этой команды, вы не сможете получить доступ кlocalhost:4200

Ракеш Ранджан
источник
Возможно ли получить доступ в обе стороны?
Zishan Paya
это работает, спасибо .. я думаю, что я смотрел на неправильный IP-адрес
Tejashri Patange
знаю, это звучит глупо, но убедитесь, что ваш телефон использует ту же сеть Wi-Fi, что и ваш компьютер. Я использовал гостевую сеть ... +1 за единственный ответ, который работал для меня.
Грег
3

Для проблемы был Firewall. Если вы работаете в Windows, убедитесь, что узел разрешен через введите описание изображения здесь

TSR
источник
Я не смог получить доступ из той же сети даже после того, как получил ng serve --host 0.0.0.0. Но разрешение брандмауэра было проблемой, как вы упомянули. Спасибо, что нашли время, чтобы поделиться этим.
Сэнди Б
3

Быстрое решение, которое может помочь кому-то:

Добавьте эту строку в качестве значения для начала 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-адресов.

Викаш Кумар
источник
1

Если вы столкнулись с той же проблемой внутри 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"]
Adiii
источник
-1

Создайте 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
Гаурав Шривастава
источник
-1

для меня это работает с использованием "ng serve --open --host 0.0.0.0", но есть предупреждение


ВНИМАНИЕ: Это простой сервер для локального тестирования или отладки приложений Angular. Он не был проверен на предмет безопасности.

Привязка этого сервера к открытому соединению может привести к компрометации вашего приложения или компьютера. Использование хоста, отличного от того, который передан флагу "--host", может привести к проблемам с подключением к веб-сокету Возможно, вам придется использовать «--disableHostCheck», если это так.

Yonas
источник
-1

Нет необходимости изменять package.json.

Для меня это работает с использованием:

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

Хост: http: // localhost: 5999 /

консул
источник
-1
  • Использование 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/**.

Нанда Кишоре Аллу
источник
-3

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

Можете добавить

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

в package.json

Тоньюкук
источник