web-dev-qa-db-fra.com

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

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

Comment puis-je créer un proxy pour mes appels AJAX vers un autre serveur?

angularangular-cli
68
elwyn

MISE À JOUR 2017

Une meilleure documentation est maintenant disponible et vous pouvez utiliser les configurations basées sur JSON et JavaScript: proxy de documentation angular-cli

exemple de configuration de proxy https

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

À ma connaissance, avec la version Angular 2.0, la configuration de proxies à l'aide du fichier .ember-cli n'est pas recommandée. manière officielle est comme ci-dessous

  1. éditez "start" de votre package.json pour regarder ci-dessous

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

  2. créez un nouveau fichier appelé proxy.conf.json à la racine du projet et à l'intérieur de celui-ci, définissez vos proxies comme ci-dessous

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

  3. Ce qui est important, c’est que vous utilisiez npm start au lieu de ng serve

Lire plus d'ici: Configuration du proxy Angular 2 cli

146
imal hasaranga perera

C'était proche de travailler pour moi. Aussi dû ajouter:

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

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

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

Je vais expliquer tout ce que vous devez savoir sur cet exemple:

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

  1. /dossier/sous-dossier/* chemin dit: Quand je vois ce chemin dans mon application angular 2 (le chemin peut être stocké n'importe où) je veux faire quelque chose avec elle. Le caractère * indique que tout ce qui suit le sous-dossier sera inclus. Par exemple, si vous avez plusieurs polices à l'intérieur /dossier/sous-dossier/, le * les prendra toutes.

  2. "cible" : " http: // localhost: 11 " pour le chemin ci-dessus make cible url de 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 testez votre application localement, le http: // localhost: 1100/folder/sub-folder / contient peut-être dans le chemin invalide:/folder/sub-folder /. Vous voulez changer ce chemin en un chemin correct qui est http: // localhost: 1100/new-folder / , par conséquent le chemin en écriture deviendra très utile. Il exclura le chemin dans l'application (côté gauche) et inclura le chemin nouvellement écrit (côté droit)

  4. "sécurisé" attribut indique si nous utilisons http ou https. Si https est utilisé dans l'attribut cible, définissez l'attribut sécurisé sur true, sinon, définissez-le sur false.

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

  6. "logLevel" attribut spécifie si le développeur souhaite générer le proxy sur son terminal, il utilisera donc la valeur "debug" comme indiqué sur l'image.

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

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

enter image description here

22
Eugene Sunic

EDIT: CECI NE FONCTIONNE PLUS DANS LES ANGULAIRES ACTUELS

Voir la réponse de @imal hasaranga perera pour une solution à jour

Le serveur dans angular-cli provient du projet ember-cli. Pour configurer le serveur, créez un fichier .ember-cli à la racine du projet. Ajoutez votre configuration JSON ici:

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

Redémarrez le serveur et toutes les requêtes y seront proxy.

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

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

Courant pour la version angular-cli: 1.0.0-beta.0

10
elwyn

Voici un autre moyen de remplacer les mandataires lorsque vous avez besoin de plus de flexibilité:

Vous pouvez utiliser l'option 'router' et du code javascript pour réécrire l'URL cible de manière dynamique. Pour cela, vous devez spécifier un fichier javascript au lieu d'un fichier json en tant que paramètre --proxy-conf dans votre liste de paramètres de script 'start':

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

Comme indiqué ci-dessus, le paramètre --base-href doit également être défini sur/si vous définissez autrement le <base href = "..."> sur un chemin dans votre index.html. Ce paramètre remplacera cette valeur et il est nécessaire de s'assurer que les URL des requêtes http sont correctement construites.

Ensuite, vous avez besoin du contenu suivant ou similaire dans votre proxy.conf.js (pas json!):

const PROXY_CONFIG = {
    "/api/*": {
        target: https://www.mydefaulturl.com,
        router: function (req) {
            var target = 'https://www.myrewrittenurl.com'; // or some custom code
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

Notez que l'option de routeur peut être utilisée de deux manières. La première consiste à affecter un objet contenant des paires valeur/clé, la clé correspondant à l’hôte/chemin demandé et la valeur correspondant à l’URL cible réécrite. L’autre méthode consiste à affecter une fonction à un code personnalisé, ce que je montre dans mes exemples ici. Dans ce dernier cas, j'ai constaté que l'option cible devait toujours être définie sur quelque chose pour que l'option de routeur fonctionne. Si vous attribuez une fonction personnalisée à l'option du routeur, l'option cible n'est pas utilisée et peut donc être définie sur true. Sinon, il doit s'agir de l'URL cible par défaut.

Webpack utilise http-proxy-middleware, vous y trouverez donc une documentation utile: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware- options

L'exemple suivant obtiendra le nom du développeur à partir d'un cookie pour déterminer l'URL cible à l'aide d'une fonction personnalisée en tant que routeur:

const PROXY_CONFIG = {
    "/api/*": {
        target: true,
        router: function (req) {
            var devName = '';
            var rc = req.headers.cookie;
            rc && rc.split(';').forEach(function( cookie ) {
                var parts = cookie.split('=');
                if(parts.shift().trim() == 'dev') {
                    devName = decodeURI(parts.join('='));
                }
            });
            var target = 'https://www.'+ (devName ? devName + '.' : '' ) +'mycompany.com'; 
            //console.log(target);
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

(Le cookie est défini pour localhost et le chemin '/' et avec une expiration longue à l'aide d'un plugin de navigateur. Si le cookie n'existe pas, l'URL pointera vers le site actif.)

2
Zoltan M

Nous pouvons trouver la documentation de 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 racine, éditez votre package.json pour inclure la configuration du proxy au démarrage. Après avoir ajouté "start": "ng serve --proxy-config proxy.conf.json" à vos scripts, exécutez npm start et non ng serve, car cela ignorera la configuration de l'indicateur dans votre package.json.

version actuelle de angular-cli: 1.1.0

2
Luuk Schoenmakers

Voici un autre exemple de travail (@ angular/cli 1.0.4):

proxy.conf.json:

{
  "/api/*" : {
    "target": "http://localhost:8181",
    "secure": false,
    "logLevel": "debug"
  },
  "/login.html" : {
    "target": "http://localhost:8181/login.html",
    "secure": false,
    "logLevel": "debug"
  }
}

courir avec :

ng serve --proxy-config proxy.conf.json
1
Patrice

Il est important de noter que le chemin du proxy sera ajouté à tout ce que vous avez configuré comme cible. Donc, une configuration comme celle-ci:

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

et une demande comme http://localhost:4200/api entraînera un appel à http://myhost.com/api/api. Je pense que l'intention ici est de ne pas avoir deux chemins différents entre environnement de développement et environnement de production. Tout ce que vous avez à faire est d'utiliser /api comme URL de base.

Donc, la bonne façon serait simplement d'utiliser la partie qui précède le chemin de l'API, dans ce cas, uniquement l'adresse de l'hôte:

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}
1
codemusings