CORS Proxy Angular
Published: 2020-06-10 08:51:06

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/957thnkdh5cfxrap9ck5.jpg)



creamos nuestra aplicación angular:
```bash
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**

```typescript
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()**

```typescript
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**

```typescript
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:

```bash
ng s -o
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fzus60o6d9ezpv1i29fw.jpg)

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. 🤗

```json
{
  "/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"** :

```json
...
"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:

```typescript
  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:
 
```json
 "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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f0x40u189w3yr7faxkry.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e8h6hghwm9fe8wffou4l.jpg)

**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