Close

Angular – Configurar proxy – mas simple

Angular – Configurar proxy – mas simple

3
5.694K

Hola buenas a todos, en un articulo anterior vimos como hacer una configuración de proxy para que nuestra aplicación angular pueda consumirlas sin problema en modo develop.

Hoy vamos a ver una forma mas rápida, si vemos el siguiente diagrama

Tenemos un Gateway que se encarga del enrutamiento de las peticiones hacia los diferentes servicios, micro servicios.

Ahora en varios casos cada microservicio tiene una configuración de cors diferente, para determinado dominio es ahí que cuando estamos en modo develop se complica, algunos instalan complementos en chrome para saltar los cors, es aqui donde configurar un proxy para evitar eso nos viene muy bien.

Ahora en nuestra aplicación vamos a crear un archivo proxy.conf.js, esto lo guardamos en la raiz del proyecto, junto al nuestro packaje.json.

Dentro de el archivo proxy.conf.js agregamos lo siguiente

const PROXY_CONFIG = [
    {
        context: [
            "/auth",
            "/biblioteca",
            "/bibliotecacore",
            "/portal/api/chats/find-by-session"
        ],
        target: "http://192.168.0.188:8085",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

En context vamos a agregar los resources de los API’s a consumir, luego en target: “http://192.168.0.188:8085”, vamos a colocar la ip de nuestro gateway, que se encarga del enrutamiento.

Ahora vamos a editar el pacakge.json

"scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.js",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },

En “start” le indicamos que use nuestro proxy.conf.js para que haga las redirecciones.

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

Ahora para probar que todo funcione bien vamos a la consola y ejecutamos nuestra aplicación Angular:

npm start

Y si vemos el log en la consola, podemos ver el siguente mensaje el cual nos indica que ya tenemos todo funcionando.

NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: [ '/auth',          
  '/biblioteca',
  '/bibliotecacore',
  '/portal/api/chats/find-by-session' ]  ->  http://192.168.0.188:8500                                                                                                                                       Date: 2018-07-06T13:47:58.152Z            Hash: a2d843d57617bae272be                      
Time: 29778ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 1.31 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 565 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 155 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 22.3 MB [initial] [rendered]

Ahora cuando en algun servicio realicemos una petición, la aplicacion va a hacer la llamada correctamente y no tendremos problemas en obtener los datos que necesitemos.

this.http.get('/biblioteca/libros')
    .map(res => res.json());

Espero les sea de utilidad este pequeño tutorial sobre configuración de proxy en Angular.

Más información aquí.

Tags:
THIS IS AN OPTIONAL

Related Post

2.872K Views

Hola, buenas a todos, luego de mucho tiempo sin publicar nada, aquí regreso, espero tener el tiempo

Micro Servicios con JHipster
7.056K Views

Hola como están? continuando con los artículos sobre JHipster, vamos a ver como crear micro servic

14.08K Views

Actualmente en la documentación oficial de Angular hay 12 páginas largas para explicar cómo func

LEAVE YOUR COMMENTS