CORS Proxy Angular

Jimy Dolores — Wed, 10 Jun 2020 08:51:06 +0000

Cuando trabajamos consumiendo APIS, a menudo podemos toparnos con un error de CORS, puede ser un Backend Server local o alguna API publica, y a mi en lo particular cuando me tope con este problema, pues me tomo tiempo encontrar una solución, talvez a algunos se les cruzo por la cabeza cuando levantaban su server local "pero si ya habilite CORS ¿Por qué sigo con este problema?", bueno para aquellos que estén pasando por este problema, les traigo la solución.😁

En esta ocasión estoy usando angular 9, será una aplicación sencilla, y levantare un Backend Server local, bueno manos a la obra.

Nuestro servidor Backend expondrá un API Rest llamado greeting el cual usa un método GET: http://localhost:8080/apidemo/greeting y mostrara el siguiente json:

creamos nuestra aplicación angular:

ng new demo-proxy-angular

una vez que que haya terminado de crear nuestro proyecto, lo abrimos con nuestro editor de código, en mi caso VSCode, y nos dirigimos a nuestro AppModule y agregamos el modulo HttpClientModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

dentro de la carpeta app crearemos un archivo llamado "apirest.service.ts" y dentro crearemos una función que consumirá nuestra API Rest, la llamaremos getGreeting()

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiRestService {
  constructor(private http: HttpClient) { }

  getGreeting(): Observable<any> {
    return this.http.get<any>('http://localhost:8080/apidemo/greeting');
  }
}

Ahora vamos a nuestro app.component.ts para hacer uso de nuestro servicio, implementamos la interfaz OnInit

import { Component, OnInit } from '@angular/core';
import { ApiRestService } from 'src/app/apirest.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'demo-proxy-angular';
  constructor(private apiRestService: ApiRestService) { }
  ngOnInit() {
    this.apiRestService.getGreeting().subscribe(data => {
      console.log(data);
    });
  }
}

listo!, ahora corremos nuestra aplicación:

ng s -o

Cuando nuestra aplicación inicie se llamara al método ngOnInit el cual llamara a nuestro servicio.

y como verán nos arroja error de CORS 😱

Ahora viene el truco😎, en la raíz de nuestro proyecto crearemos un archivo llamado proxy.conf.json y contendrá lo siguiente:

Atributos

target: Se define la url de nuestro backend.
secure: es aplicar el uso de SSL.
logLevel: Para comprobar que todo funcione correctamente debemos indicar el valor en debug.

OJO con este dato muchachos!, si nuestro backend no se esta ejecutando localmente debemos de agregar el atributo:

changeOrigin:true

En mi caso estoy corriendo un backend local por lo que no es necesario, pero ahí tienen el dato chicos. 🤗

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

el atributo "/apidemo/*" es el nombre que usaremos para invocar el servicio.

Ya que tenemos nuestro archivo proxy, ahora tenemos que modificar nuestro archivo angular.json, dirijanse a serve > options deberán de agregar el atributo "proxyConfig" :

...
"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "demo-proxy-angular:build",
            "proxyConfig": "proxy.conf.json"
          },
....

Guardan los cambios y ahora realizaremos una modificación a la manera en que llamamos nuestra api:

  getGreeting(): Observable<any> {
    // return this.http.get<any>('http://localhost:8080/apidemo/greeting');
    return this.http.get<any>('apidemo/greeting');

  }

Fíjense que ahora solo coloco apidemo/greeting ya que nuestro proxy se encargara de reescribir la petición. 😎

Ahora modificaremos nuestro archivo "package.json" y agregaremos el siguiente comando:

 "scripts": {
   ...
    "start:proxy": "ng serve --proxy-config  proxy.conf.json  --open"
  },

con este comando ejecutaremos nuestra aplicación con la configuración de nuestro proxy, y ahora los resultados.

Recuerden, esta configuración no funciona en producción, es para poder mitigar estos inconvenientes de CORS en el proceso de desarrollo FrontEnd.

Y eso es todo por hoy amigos, espero que esta información les ayude, aquí les dejo un repositorio en GitHub con las configuraciones que hemos visto https://github.com/jimmyhdolores/demo-proxy-angular

Si tienen alguna duda o consulta me escriben, no hay problema 🤗
Sigueme en Github https://github.com/jimyhdolores

**Actualización 14/06/2020
Aquí les dejo el vídeo donde implemento todo lo explicado, dale Like si te gusta y suscribete:
https://www.youtube.com/watch?v=CE52eOj4C_I&t=50s

Custom Path tsconfig.json TypeScript

Jimy Dolores — Fri, 05 Jun 2020 16:03:31 +0000

Cuando un proyecto crece y tenemos muchas carpetas, las rutas se ven super largas, y la verdad no se ve muy llamativo, para esto podemos customizar nuestras rutas en el archivo tsconfig.json, antes de ellos miremos los siguientes casos:

import { NavRoute } from '../../../../nav-routing';
import { NavigationService } from '../../../services/navigation/navigation.service';

import { Feacture} from '../../../../../../core/service/interfaces/feacture';

Las rutas son engorrosas verdad, quien no ha visto esto en sus proyectos 😱

Path mapping al rescate

TypeScript permite el uso de la asignación de ruta que permite especificar rutas de módulo arbitrarias (que no comienzan con "/" o ".") Y asignarlas a rutas físicas en el sistema de archivos en las opciones del compilador en el archivo tsconfig como se muestra a continuación:

...
"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@demo/app/*": [
        "app/*"
      ],
      "@demo/core/*": [
        "app/core/*"
      ],
      "@demo/auth/*": [
        "app/auth/*"
      ],
      "@demo/components/*": [
        "app/core/components/*"
      ],
      "@demo/pages/*": [
        "app/page/*"
      ],
      "@demo/services/*": [
        "app/core/services/*"
      ],
    },
...

La primera propiedad que debemos agregar es baseUrl. Fíjense que las rutas se resuelven en relación con baseUrl.
La segunda propiedad es paths, esto le indica al compilador que cualquier módulo de importación que coincida por ejemplo, con el patrón "@demo/app/*", busque en esa ubicación.

Ojo chicos la idea de personalizar nuestras rutas es evitar esas enormes rutas engorrosas y tener más legibilidad de "que es lo que estamos importando"; recuerden que aunque hayan personalizado las rutas también pueden seguir usando las rutas relativas, las pueden combinar si desean.

Datos extras 😎

Si estas usando Visual Studio Code hay que realizar unos ajustes para que el Auto Import reconozca nuestras rutas, vayan a Setting, luego escojan la opcion "Open Setting JSON" y agregan lo siguiente

 "typescript.preferences.importModuleSpecifier": "non-relative"

Si tienen alguna duda o consulta me escriben, no hay problema 🤗
Sigueme en Github https://github.com/jimyhdolores

DEV Community: Jimy Dolores

CORS Proxy Angular

Custom Path tsconfig.json TypeScript

Path mapping al rescate

Datos extras 😎