Planeta Red
  • Inicio
  • Dispositivos
  • Noticias
  • Reviews
  • Manuales
  • Aplicaciones
Sin resultados
Ver todos los resultados
Planeta Red
Sin resultados
Ver todos los resultados
Planeta Red

Solucionando los problemas de CORS en Ionic 3

Por Carlos Jiménez Delgado
31/08/2017
en Manuales
0
Ionic 3

Si estáis desarrollando aplicaciones utilizando el framework de Ionic para el desarrollo de aplicaciones híbridas para móviles es bastante probable que os hayáis tenido que enfrentar a los avisos del inspector de Chrome de que una petición a un determinado servicio no se ha podido realizar debido a que se incumplían ciertas políticas de seguridad. Son los conocidos como problemas control de acceso HTTP o por sus siglas CORS.

CORS

Estos problemas surgen cuando desde un determinado servidor se intenta acceder a recursos alojados en otro servidor. En estos casos la solución es sencilla.

Evitar los problemas de CORS usando extensiones

La primera de las opciones es la de usar una extensión o plugin que modifique las cabeceras de todas las peticiones que realice el servidor para añadirle una determinadas directivas. En este caso se trata de añadir:

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin:

Estas directivas se podrían añadir a la información enviada por nuestro header. Si tenemos un header común tan sólo tendríamos que añadirlas para evitar este problema. Aunque la solución más sencilla en este caso es utilizar una extensión que realiza este trabajo de manera automática y transparente.

Una de las extensiones que podéis utilizar es Moesif Origin & CORS Changer. Pero hay muchas más como CORS Toggle o CORS Enabler.

Todas estas opciones habilitarán un botón que podemos colocar al lado de la barra de direcciones y que podremos habilitar/deshabilitar para permitir saltarnos los problemas causados por CORS.

Evitar los problemas de CORS usando un proxy

Aunque la opción de poner una extensión es bastante sencilla en algunos casos es probable que no sea posible usarla. Bien sea porque el ordenador no es nuestro o por cualquier otro motivo.

En estos casos lo más sencillo es que creemos un proxy que encapsulará estas peticiones. En este caso el servidor mapeara estos recursos externos como si fueran locales, por lo que el problema de CORS desaparecerá.

Este proxy se puede implementar en varios sitios. En el caso de Ionic nuestro servidor local (localhost) donde se realizan pruebas se levanta con el comando:

ionic serve

Esto levantará nuestra web/app móvil en http://localhost:8100/

Pues bien, este servidor se puede configurar gracias al fichero ionic.config.json y que podremos encontrar en la raiz de nuestros proyectos realizados con Ionic.

El contenido del mismo será similar a esto:

{
“name”: “[Nombre proyecto Ionic]”,
“app_id”: “”,
“type”: “ionic-angular”,
“integrations”: {
“cordova”: {}
}
}

Tan sólo tendremos que añadir al mismo la configuración del proxy:

{
“name”: “[Nombre proyecto Ionic]”,
“app_id”: “”,
“type”: “ionic-angular”,
“integrations”: {
“cordova”: {}
},
“proxies”: [{
“path”: “/api-rest”,
“proxyUrl”: “[URL acceso recurso externo]”
}]
}

Haciendo esto tendremos que cambiar todas las llamadas que realicemos a la api-rest modificando el path o ruta de acceso para que apunte a “http://localhost:8100/api-rest”

La opción más cómoda para hacer esto es tener una clase Api que se encargue de realizar las llamadas al servicio rest y que modificaremos convenientemente para servir una url u otra en función del entorno en el que nos encontremos.

Una aproximación a lo que os decimos es:

urlApiRestLocal: string = ‘http://localhost:8100/api’;
urlApiRest: string = ‘…….’;

constructor(public http: Http) {
}

getURL(url: string) {
if ( window.location.hostname === “localhost” ) {
return this.urlApiRestLocal;
} else {
return this.urlApiRest;
}
}

Esto nos permitiría tener varias url para atacar los servicios API Rest en diferentes entornos (local, desarrollo, preproducción, producción), pero como suele decirse eso será el trabajo para mi yo del futuro.

Espero haberos podido ayudar.

Saludos desde lo más profundo de los bytes.

Etiquetas: CORSdesarrollo de appsIonicIonic 3JSprogramacionprogramación híbrida
Artículo anterios

Huawei Nova Lite 2017, buenas especificaciones y metal para un precio demasiado alto

Siguiente artículo

¿Que puede hacer un smartphone con una batería de 7000mAh?

Carlos Jiménez Delgado

Además de administrador del blog, soy Técnico Superior en Informática de Gestión de Empresas e Ingeniero Técnico en Informática de Sistemas. Actualmente trabajo como Analista Programador para una Consultora Informática y dedico parte de mi tiempo libre al apasionante mundo de las nuevas tecnologías.

Siguiente artículo
DOOGEE BL7000

¿Que puede hacer un smartphone con una batería de 7000mAh?

Razer Wolverine Ultimate

Razer revela sun mando Wolverine Ultimate con un sinfín de personalizaciones

LG V30

El LG V30 ya es oficial; Detalles, detalles, imágenes y precios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

TOPANÁLISIS/REVIEW

HyperX Pulsefire Dart

HyperX PulseFire Dart

HyperX PulseFire Dart es un ratón gaming inalámbrico, con sensor Pixart €86
KROM Kayros

KROM Kayros

El KROM Kayros es un mando inalámbrico para juegos, con iluminación €31
Toshiba Dynabook TECRA A40-G-123

Toshiba Dynabook Tecra A40-G-123

El Toshiba Dynabook Tecra A40-G-123 es un portátil con pantalla de €943
[Análisis-Review] VAKOLE CO20, características y precio

VAKOLE CO20

La VAKOLE CO20 es una bicicleta eléctrica todoterreno que ofrece unas €1322
Huion Inspiroy Dial 2

Huion Inspiroy Dial 2

La Huion Inspiroy Dial 2 es una tableta de dibujo con €143

TE INTERESA

Nuevo Auriculares Inalámbricos Bluetooth 5.3 Deportivos con 4 Micrófonos, ENC Noise Reduction, Estéreo HiFi, 32 Horas de Reproducción,IPX6 Impermeable,Toque Inteligente,para iPhone Xiaomi Samsung Huawei
Auriculares Inalámbricos Bluetooth 5.3 Deportivos con 4 Micrófonos, ENC Noise Reduction, Estéreo HiFi, 32 Horas de Reproducción,IPX6 Impermeable,Toque Inteligente,para iPhone Xiaomi Samsung Huawei
62,06 EUR
Comprar en Amazon
RebajasNuevo Xiaomi L83 Redmi Pad Tablet, 4 GB - 128 GB, Resolución de 1200 x 2000, Frecuencia de Actualización de 90 Hz, Gris Grafito
Xiaomi L83 Redmi Pad Tablet, 4 GB - 128 GB, Resolución de 1200 x 2000, Frecuencia de Actualización de 90 Hz, Gris Grafito
210,95 EUR
Comprar en Amazon
Nuevo Cargador Tipo c Carga rapida por Xiaomi Redmi Note 10/10 Pro/11 9/11 9 Pro/9T/9S/8 8T 7 10S, Mi Note 10 Lite, Mi A2 A3/10T Lite/10T Pro/11T Lite/9T, Samsung S10 S9 S8/Note10, Huawei, Xiaomi Cargador
Cargador Tipo c Carga rapida por Xiaomi Redmi Note 10/10 Pro/11 9/11 9 Pro/9T/9S/8 8T 7 10S, Mi Note 10 Lite, Mi A2 A3/10T Lite/10T Pro/11T Lite/9T, Samsung S10 S9 S8/Note10, Huawei, Xiaomi Cargador
10,50 EUR
Comprar en Amazon

Artículos Recientes

Acer Connect Vero W6m

Acer Connect Vero W6m, el primer router ecológico alimentado por un procesador de cuatro núcleos a 2GHz y que garantiza conectividad, cobertura y seguridad

28/05/2023
Acer Swift Edge 16

Acer Swift Edge 16, un portátil con procesadores AMD Ryzen 7040, gráficos AMD Radeon 780M y funciones AI

28/05/2023
  • Quienes somos
  • Publicidad
  • Política de Privacidad
  • Aviso Legal
  • Contacto

Sin resultados
Ver todos los resultados
  • Inicio
  • Dispositivos
  • Noticias
  • Reviews
  • Manuales
  • Aplicaciones

Este sitio web utiliza cookies. Al continuar usando este sitio web, usted está dando su consentimiento para que se usen cookies. Visite nuestra Política de Privacidad y Cookies.