Comment autoriser l'accès en dehors de localhost

Comment puis-je autoriser l'accès en dehors de l'hôte local sur Angular2? Je peux naviguer localhost:3030/panelfacilement mais je ne peux pas naviguer lorsque j'écris mon adresse IP telle que 10.123.14.12:3030/panel/.

Pourriez-vous s'il vous plaît me permettre de résoudre ce problème? Je n'utilise pas npm(node ​​project manage - node install / node start) pour installer et exécuter le projet.

Si vous le souhaitez, je peux fournir mon package.jsonet index.html.

L'utilisation ng serve --host 0.0.0.0vous permettra de vous connecter à l' ng serveaide de votre ip au lieu de localhost.

ÉDITER

Dans les versions plus récentes du cli, vous devez fournir votre adresse IP locale à la place

MODIFIER 2

Dans les versions plus récentes du cli (je pense que la v5 et les versions ultérieures), vous pouvez à nouveau l'utiliser 0.0.0.0comme adresse IP pour l'héberger à tout le monde sur votre réseau.

Utilisateurs Mac:

1. Allez dans Préférences Système -> Réseau -> Wi-Fi
2. Copiez l'adresse IP sous Statut (généralement 192.168.1.x)
3. Collez-le dans votre ng serve comme: ng serve --host 192.168.1.x

Ensuite, vous devez pouvoir voir votre page sur d'autres appareils via 192.168.1.x:4200.

commande run

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

cela désactivera la vérification de l'hôte et permettra l'accès de l'extérieur (au lieu de l'hôte local) avec l'adresse IP

Vous pouvez utiliser la commande suivante pour accéder avec votre ip.

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

Si vous utilisez npm et que vous souhaitez éviter d'exécuter la commande à chaque fois, nous pouvons ajouter la ligne suivante au fichier package.json dans la section scripts .

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

Ensuite, vous pouvez exécuter votre application à l'aide de la commande ci-dessous pour être accessible à partir de l'autre système du même réseau.

npm start

Je viens d'éditer le angular.jsonfichier dans mon projet comme ci-dessous et cela fonctionne

...

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

...

vous pouvez également introspecter tout le trafic HTTP en cours d'exécution sur vos tunnels en utilisant ngrok , puis vous pouvez exposer en utilisantngrok http --host-header=rewrite 4200

Ouvrez cmd et accédez à l'emplacement du projet, c'est-à-dire où vous exécutez npm install ou ng serve pour le projet.

puis exécutez la commande - ng serve --host 10.202.32.45où 10.202.32.45est votre adresse IP.

Vous pourrez accéder à votre page à l' 10.202.32.45:4200endroit où 4200 est votre numéro de port.

Remarque: si vous diffusez votre application à l'aide de cette commande, vous ne pourrez pas accéderlocalhost:4200

Car le problème était le pare-feu. Si vous êtes sous Windows, assurez-vous que le nœud est autorisé à passer

Une solution rapide qui pourrait aider quelqu'un:

Ajoutez cette ligne comme valeur de départ ng serve --host 0.0.0.0 --disable-host-check dans votrepackage.json

ex:

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

Et puis simplement faire startounpm run start

vous pourrez accéder à votre projet à partir d'autres adresses IP locales.

Si vous rencontrez le même problème dans Docker, vous pouvez utiliser ci-dessous CMDdans Dockerfile.

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

Ou complète Dockerfile

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

Créez proxy.conf.jsonet collez cette configuration

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

Remplacer:

let url = 'api/'+ your path;

Exécuter à partir de la CLI:

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

pour moi cela fonctionne en utilisant "ng serve --open --host 0.0.0.0" mais il y a un avertissement

AVERTISSEMENT: il s'agit d'un serveur simple à utiliser pour tester ou déboguer localement des applications Angular. Il n'a pas été examiné pour des problèmes de sécurité.

Lier ce serveur à une connexion ouverte peut compromettre votre application ou votre ordinateur. L'utilisation d'un hôte différent de celui passé à l'indicateur "--host" peut entraîner des problèmes de connexion websocket. Vous devrez peut-être utiliser "--disableHostCheck" si tel est le cas.

Aucun package.json n'est nécessaire pour changer.

Pour moi, cela fonctionne en utilisant:

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

Hôte: http: // localhost: 5999 /

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

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

• Vous pouvez maintenant voir la ligne ci-dessous à la fin de la compilation.

Angular Live Development Server écoute sur 192.111.1.11:4545, ouvrez votre navigateur sur http://192.111.1.11:4545/**.

Pour les personnes qui utilisent le gestionnaire de projet de nœud, cette ligne s'ajoutant à package.json sera également suffisante. Pour les utilisateurs de CLI angulaire, la réponse de mast3rd3mon est vraie.

Vous pouvez ajouter

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

à package.json