angular-cli server - comment proxyer les requêtes API vers un autre serveur ?

Question

Avec le angular-cli ng serve serveur de développement local, il sert tous les fichiers statiques du répertoire de mon projet.

Comment puis-je proxyer mes appels AJAX vers un autre serveur ?

Answer 1

À ma connaissance Angulaire de la version 2.0 configuration des proxys de l'aide .braise-cli fichier n'est pas recommandé. de manière officielle, c'est comme ci-dessous

1. edit "start" de votre package.json à regarder ci-dessous

   "start": "ng serve --proxy-config proxy.conf.json",

2. créer un nouveau fichier appelé proxy.conf.json à la racine du projet et à l'intérieur, qui définissent votre procurations comme ci-dessous

   {
     "/api": {
       "target": "http://api.yourdomai.com",
       "secure": false
     }
   }
   

3. Chose importante est que vous utilisez npm start au lieu de ng serve

Lire plus ici : Proxy Configuration Angulaire 2 cli

Mise à JOUR en 2017

Une meilleure documentation est maintenant disponible et vous pouvez l'utiliser à la fois JSON et JavaScript configurations: angulaire de la cli de la documentation proxy

exemple de configuration de proxy https

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

Answer 2

Je vais vous expliquer ce que vous besoin de savoir sur l'exemple ci-dessous :

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

1. /dossier/sous-dossier/ * : path dit : Lorsque je vois ce chemin dans mon application angulaire (le chemin peut être stocké n'importe où), je veux faire quelque chose avec. Le caractère * indique que tout ce qui suit le sous-dossier sera inclus. Par exemple, si vous avez plusieurs polices dans le dossier /dossier/sous-dossier/ le * les ramassera tous

2. "cible" : "http://localhost:1100" pour le chemin ci-dessus faire cible URL l'hôte/source, donc en arrière plan nous aurons http://localhost:1100/folder/sub-folder/

3. "pathRewrite " : { "^/dossier/sous-dossier/" : "/nouveau-dossier/" }, Maintenant, disons que vous voulez tester votre application localement, l'url http://localhost:1100/folder/sub-folder/ peut contenir un chemin invalide : /folder/sub-folder/. Vous voulez changer ce chemin pour un chemin correct qui est http://localhost:1100/new-folder/, donc le pathRewrite deviendra utile. Elle exclura le chemin dans l'application (à gauche) et inclura le nouveau chemin écrit (à droite).

4. "sécurisé" L'attribut secure : représente l'utilisation de http ou de https. Si https est utilisé dans l'attribut cible, alors l'attribut sécurisé est défini comme vrai, sinon il est défini comme faux.

5. "changeOrigin" : l'option n'est nécessaire que si votre hôte cible n'est pas l'environnement actuel, par exemple : localhost. Si vous voulez changer l'hôte en www.something.com qui serait la cible dans le proxy, puis définissez l'attribut changeOrigin sur "true" :

6. "logLevel" L'attribut "debug" spécifie si le développeur veut afficher le proxy dans son terminal/cmd, il doit donc utiliser la valeur "debug" comme indiqué dans l'image.

En général, le proxy aide à développer l'application localement. Vous définissez vos chemins d'accès aux fichiers à des fins de production et si vous avez tous ces fichiers localement dans votre projet, vous pouvez simplement utiliser le proxy pour y accéder sans changer le chemin d'accès dynamiquement dans votre application.

Si cela fonctionne, vous devriez voir quelque chose comme ceci dans votre cmd/terminal.

Answer 3

C'était proche de fonctionner pour moi. Il fallait aussi ajouter :

"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}

Full proxy.conf.json montré ci-dessous :

{
    "/proxy/*": {
        "target": "https://url.com",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/proxy": ""
        }
    }
}

Answer 4

EDIT : CELA NE FONCTIONNE PLUS DANS L'ACTUELLE ANGULAR-CLI

Voir la réponse de @imal hasaranga perera pour une solution actualisée.

---

Le serveur en angular-cli vient de la ember-cli projet. Pour configurer le serveur, créez un .ember-cli dans la racine du projet. Ajoutez-y votre configuration JSON :

{
   "proxy": "https://api.example.com"
}

Redémarrez le serveur et toutes les demandes seront traitées par le proxy.

Par exemple, je fais des requêtes relatives dans mon code pour /v1/foo/123 qui sera récupéré à https://api.example.com/v1/foo/123 .

Vous pouvez également utiliser un drapeau lorsque vous démarrez le serveur : ng serve --proxy https://api.example.com

Version actuelle pour angular-cli : 1.0.0-beta.0

Answer 5

Nous pouvons trouver la documentation du proxy pour Angular-CLI ici :

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Après avoir configuré un fichier appelé proxy.conf.json dans votre dossier Root, modifiez votre package.json pour inclure la configuration du proxy au démarrage de ng. Après avoir ajouté "start" : "ng serve --proxy-config proxy.conf.json" à vos scripts, exécutez ng start et non ng serve, car cela ignorera le drapeau configuré dans votre package.json.

version actuelle d'angular-cli : 1.1.0