Ionic proxy: Como evitar errores CORS

Importante! Este post sólo debe usarse para evitar errores CORS mientras se desarrolla en local a través de un navegador web, esto no sirve para servidores de producción!

1. Creamos un archivo llamado proxy.conf.json en la misma ruta que angular.json y añadimos el siguiente contenido:

{
  "/custom-path/*": {
    "target": "https://mydomain.com",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {"^/custom-path" : ""}
  }
}

2. Tenemos que actualizar el fichero angular.json para cargar el nuevo proxy en el comando ionic serve:

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

3. Y por último tenemos que actualizar las llamadas API, en mi caso tengo un servicio así:

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

@Injectable()
export class Api{
    constructor(public http: HttpClient) {}

    getUserInfo(){
        return this.http.get('/custom-path/api/users')
    }
}

La parte de la URL '/custom-part/' será reemplazada por "http://mydomain.com", la URL final será: "http://mydomain.com/api/users"

Eso resolvió los problemas de CORS que tenía, después de hacer esto puedo llamar API's y debugear en el navegador sin ningún problema.

Si todavía sigues teniendo errores CORS, puedes intentar ejecutar el comando ionic serve de la siguiente manera:

ionic serve -- --proxy-config ./proxy.conf.json

Importante! Fíjate en los guiones extra '--', no los omitas.

Dejar un comentario