Cómo permitir el acceso fuera de localhost


184

¿Cómo puedo permitir el acceso fuera del localhost en Angular2? Puedo navegar localhost:3030/panelfácilmente pero no puedo navegar cuando escribo mi IP como 10.123.14.12:3030/panel/.

¿Podría por favor permitirme cómo solucionarlo? No estoy usando npm(gestión de proyecto de nodo - instalación de nodo / inicio de nodo) para instalar y ejecutar el proyecto.

Si lo desea, puedo proporcionar mi package.jsony index.html.


1
usas ng serve?
— mast3rd3mon

1
Sí, estoy usando un servidor ng
— Tonyukuk

2
intentaste ng serve --host 10.123.14.12?
— Digvijay

1
Estoy cansado de servir y dice "Tengo que estar dentro de un proyecto angular - cli para poder usar el comando de servir".
— Tonyukuk

Respuestas:


338

El uso ng serve --host 0.0.0.0le permitirá conectarse al ng serveuso de su ip en lugar de localhost.

EDITAR

En las versiones más recientes del cli, debe proporcionar su dirección IP local

EDITAR 2

En las versiones más recientes de cli (creo que v5 y posteriores) puede usarlo 0.0.0.0como ip nuevamente para alojarlo para que cualquier persona en su red pueda hablar.


1
dice "tienes que estar dentro de un proyecto angluar - cli para usar el comando serve" con la advertencia roja cuando escribo ng sreve y también un mensaje amarillo que indica que estoy ejecutando la versión 6.2.2 de Node, que no será compatible en futuras versiones de la CLI después de escribir ng serve
— Tonyukuk

1
primero, intente actualizar el nodo, segundo, intente reiniciar su terminal / vscode
— mast3rd3mon

1
Lo actualicé del paquete json a 6.0.46 como "@ types / node": "6.0.46", pero sigo recibiendo el mismo mensaje
— Tonyukuk

1
No entiendo cómo la gente da - vote a mis preguntas y no sé quién lo hace. Incluso si entiendes mal la pregunta y me das respuestas incorrectas, todavía dan reputación "-". Encontré la respuesta yo mismo. Se suponía que debía agregar "" servidor ":" webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000 "," a packagejson
— Tonyukuk

77
Esto funcionó para mí:ng serve --open --host 0.0.0.0 --disable-host-check
— Jonathan.Brink

39

Usuarios de Mac:

  1. Vaya a Preferencias del sistema -> Red -> Wi-Fi
  2. Copie la dirección IP debajo del estado (generalmente 192.168.1.x)
  3. Péguelo en su ng servir como: ng serve --host 192.168.1.x

Entonces debe poder ver su página en otros dispositivos a través de 192.168.1.x:4200.


1
Solía ​​trabajar para mí y ya no funciona. Preguntándome por qué. ¡Siento que lo he intentado todo! Mi firewall está deshabilitado. ng serve --host 10.xxx --disable-host-check / ng serve --host 0.0.0.0 --disable-host-check -> No accesible desde una máquina remota de Windows que está en la misma red con 10.xxx : 4200
— Rafaël Moser

Funciona bien en Angular 7 y MacOS 10.14.6
— bks

Para lo que vale, la respuesta aceptada está funcionando para mí en MacOS a partir de octubre de 2019.
— Alexander Nied

Esto funciona para mí, y después de buscar a lo largo y ancho, es la única respuesta que he visto para especificar este paso clave: en la barra de direcciones de su navegador Safari de iPhone, conecte: 192.168.1.x: 4200, donde x = dígitos finales de su dirección IP. Incluir el ": 4200" fue la diferencia para mí.
— 9gt53wS

@ RafaëlMoser lo resolviste? Tengo el mismo problema y estoy realmente despistado.
— Maaddy

29

ejecutar comando

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

esto deshabilitará la verificación del host y permitirá el acceso desde afuera (en lugar de localhost) con la dirección IP


3
No necesitaba --disable-host-check. ng serve --host 0.0.0.0funciona bien para mi ¿Qué se supone que debe hacer la verificación de host?
— Andrew

55
Por una vez necesitaba lo disabled-host-checkcontrario, recibí el mensaje "
— Encabezado de

¿hay alguna manera de definirlo en un archivo de configuración para evitar mencionarlo cada vez?
— Ayush Kumar

12

Puede usar el siguiente comando para acceder con su ip.

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

Si está utilizando npm y desea evitar ejecutar el comando cada vez, podemos agregar la siguiente línea al archivo package.json en la sección de scripts .

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

Luego puede ejecutar su aplicación utilizando el siguiente comando para acceder desde el otro sistema en la misma red.

npm start

3
Ahora es -disableHostCheck = true | false en mi versión, Angular 8.
— Tony

8

Acabo de editar el angular.jsonarchivo en mi proyecto como se muestra a continuación y funciona

...

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

...


8

también puede introspectar todo el tráfico HTTP que se ejecuta sobre sus túneles usando ngrok , luego puede exponer usandongrok http --host-header=rewrite 4200


4

Abra cmd y navegue a la ubicación del proyecto, es decir, donde ejecuta npm install o ng serve para el proyecto.

y luego ejecute el comando: ¿ ng serve --host 10.202.32.45dónde 10.202.32.45está su dirección IP?

Podrá acceder a su página 10.202.32.45:4200donde 4200 es su número de puerto.

Nota: Si sirve su aplicación usando este comando, entonces no podrá accederlocalhost:4200


¿Es posible acceder a ambos lados?
— zishan paya

funciona thanks..i adivinar lo que estaba buscando en la dirección IP equivocada
— Tejashri Patange

sé que suena tonto, pero asegúrese de que su teléfono esté utilizando la misma red wifi que su máquina de desarrollo. Estaba usando una red de invitados ... +1 por la única respuesta que me funcionó.
— greg

3

El problema era el cortafuegos. Si está en Windows, asegúrese de que el nodo esté permitido a través de ingrese la descripción de la imagen aquí


No pude acceder desde la misma red incluso después de servir con ng serve --host 0.0.0.0. Pero el permiso de firewall fue el problema como mencionaste. Gracias por tomarse el tiempo para compartir este.
— Sandy B

3

Una solución rápida que podría ayudar a alguien:

Agregue esta línea como valor para comenzar ng serve --host 0.0.0.0 --disable-host-check en supackage.json

ex:

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

Y luego simplemente hacer startonpm run start

Podrá acceder a su proyecto desde otras IP locales.


1

Si enfrenta el mismo problema dentro de Docker, puede usarlo a continuación CMDen Dockerfile.

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

O completar Dockerfile

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

-1

Crea proxy.conf.jsony pega esta configuración

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

Reemplazar:

let url = 'api/'+ your path;

Ejecutar desde CLI:

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

-1

para mí funciona usando "ng serve --open --host 0.0.0.0" pero hay una advertencia


ADVERTENCIA: Este es un servidor simple para usar en pruebas o depuración de aplicaciones angulares localmente. No ha sido revisado por problemas de seguridad.

Vincular este servidor a una conexión abierta puede comprometer su aplicación o computadora. El uso de un host diferente al que se pasó al indicador "--host" podría provocar problemas de conexión de WebSocket. Es posible que necesite usar "--disableHostCheck" si ese es el caso.


-1

No package.json es necesario cambiar.

Para mí funciona usando:

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

Anfitrión: http: // localhost: 5999 /


-1
  • Uso ng serve --host<Your IP> --port<Required if any>.

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

  • Ahora puede ver la siguiente línea al final de la compilación.

Angular Live Development Server está escuchando en 192.111.1.11:4545, abra su navegador en http://192.111.1.11:4545/**.


-3

Para las personas que usan el administrador de proyectos de nodo, también será suficiente esta línea que se agrega a package.json. Para usuarios de CLI angular, la respuesta de mast3rd3mon es verdadera.

Puedes añadir

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

a package.json

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.