Informatique
Publié le 09/14/2017, rédigé par Chloé MAHALIN

Angular 4

Rediriger certaines URLs vers un proxy

Le développement d'un client web passe souvent par l'implémentation d'une couche d'API côté server. Et lorsque l'on utilise @Angular/cli pour initialiser et gérer son build, on est amené à utiliser la ligne de commande 'ng serve' qui initialise un serveur de test côté client.

Résultat : Deux serveurs lancés sur votre machine de dev. Et il est inutile de tenter de faire communiquer les deux serveurs : en situation réelle, vous obtiendrez une "x-domain error", une erreur qui a pour but de protéger les utilisateurs d'un site web d'une attaque d'un serveur extérieure (souvent via de l'injection SQL). D'ailleurs, il est préférable de ne pas essayer d'aller contre ce comportement qui, encore une fois, vise à protéger vos utilisateurs.

Il est toutefois possible, en mode développement, de faire communiquer vos deux serveurs en mode "dev" pour vos tests de communication.

Chez moi, le serveur client Front est sur le port 4200 et le serveur Back est sur le port 8080.

Rajouter un fichier proxy.config.json à la racine de votre projet web contenant uniquement les lignes suivantes :

{
    "/api/*": { 
        "target":"http://localhost:8080",
        "secure": false,
        "logLevel":"debug"
    }
}

/api/* correspond à la regex des URLs redirigées.

L'attribut "target" indique vers quelle URL rediriger les requètes correspondant au pattern défini au dessus.

Vous pouvez mettre autant de redirections que vous le souhaitez vers les URLs les URLs que vous le souhaitez.

Dans le fichier package.json, rajouter la ligne de configuration du proxy dans la commande de votre choix :

{
  "name": "MonProject",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
}

Ainsi, lorsque vous tapez la ligne de commande 'npm run start' à la racine de votre projet, le serveur de @Angular/cli va démarrer (sur le port 4200 par défaut) et toutes les urls '/api/*' seront redirigées vers votre serveur Back ayant comme numéro de port 8080.

NB : Conservez bien, dans votre code, les URLs des requêtes qui commencent par '/', il ne faut jamais indiquer le domaine ('http://localhost:8080/') au début de vos URLs de requêtes. Cela irait, d'une part, contre une certaine flexibilité de votre code client, qui serait contraint à une URL côté serveur et un protocole (HTTP ou HTTPS) mais aussi, d'autre part, contre le comportement par défaut d'une application web, ou toute URL commence par '/'.

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité