Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Manejo de CORS con The Ionic 5 Proxy

 Ionic 5 le permite crear aplicaciones móviles híbridas utilizando tecnologías web que suele utilizar para crear aplicaciones. Dado que la creación de aplicaciones móviles híbridas con Ionic 5 es en realidad crear aplicaciones web y luego agruparlas dentro de un contenedor nativo con Apache Cordova, el flujo de trabajo de desarrollo comienza con un servidor local que sirve una aplicación web que se puede probar en el navegador y luego se puede construir usando Cordova. para ejecutarse en un dispositivo real donde tenga acceso a características nativas reales.

También puede omitir el servicio de la aplicación localmente con el comando de servicio iónico y usar la nueva recarga en vivo de Ionic 5 que le permite usar un dispositivo real para probar la aplicación y continuar desarrollando la aplicación, cuando sus archivos de origen cambian, Ionic envía los cambios instantáneamente a dispositivo.

En ambas situaciones, es decir, desarrollar localmente con servicio iónico o probar utilizando un dispositivo real con recarga en vivo, Ionic inicia un servidor de desarrollo local para servir su aplicación, al que se puede acceder como cualquier aplicación web normal de http://localhost:8100/forma predeterminada, pero puede cambiar el puerto a cualquier puerto disponible si es necesario.

Entrega de la misma política de origen con el proxy Ionic 5

Entonces, ¿cómo manejar la política del mismo origen y los problemas de CORS relacionados con el desarrollo local? Dado que Ionic usa un servidor local en ambas situaciones que mencionamos anteriormente, cualquier solicitud (GET, POST, etc.) enviada a servidores externos se marca como enviada desde el origen localhost:8100.

La misma política de origen implementada en los navegadores establece que solo los clientes del mismo origen de dominio pueden conectarse con el servidor con CORS habilitado.

Suele recibir un error similar a:

XMLHttpRequest no puede cargar [YOUR-SERVER-ENDPOINT]. No hay ningún encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen 'http: // localhost: 8100'.

¿Qué es CORS?

CORS es una abreviatura de Uso compartido de recursos de origen cruzado que le permite controlar el acceso a los recursos de su servidor desde clientes con diferentes orígenes o simplemente dominios.

Por razones de seguridad, los navegadores no permiten solicitudes de origen cruzado en scripts de JavaScript mediante XMLHttpRequest o cualquier otro mecanismo.

CORS proporciona algunos encabezados HTTP que permiten a los servidores dictar qué orígenes o dominios pueden acceder a los recursos desde un navegador web.

Para manejar la misma política de origen y problemas de cors, puede:

  • Pruebe en un dispositivo real sin la recarga en vivo habilitada, pero eso requiere tiempo y esfuerzo.
  • Utilice el proxy Ionic 5.
  • Cambiar los encabezados CORS en el servidor para permitir que todos o algunos dominios seleccionados se conecten al servidor.

En este tutorial, veremos cómo usar la segunda opción que es usar el proxy Ionic 3 para manejar los problemas de CORS al desarrollar aplicaciones móviles híbridas localmente con el marco Ionic 5.

El proxy Ionic 5 puede ser especialmente útil cuando no tenemos el control del servidor API de destino, por lo que no podemos cambiar los encabezados CORS para permitir que el servidor acepte solicitudes del origen del servidor de desarrollo local.

Entonces, ¿cómo usar el proxy en Ionic 3?

Habilitación del proxy Ionic 5

Usar un proxy para evitar los problemas de CORS con Ionic 5 es realmente muy fácil y directo, todo lo que necesita hacer es lo siguiente.

Utilice un editor de texto para abrir ionic.config.jsonque existe dentro de la raíz de su proyecto.

A continuación, agregue una matriz de proxies como en el siguiente ejemplo:

    {
    "name": "ionic5-example",
    "app_id": "id",
    "v2": true,
    "typescript": true,
    "proxies": [{
        "path": "/goto",
        "proxyUrl": "http://target-server.com"
    }]
    }

Solo necesita agregar la matriz de proxies, deje los otros valores como están en su original ionic.config.json.

El proxyUrl debe contener el servidor al que desea conectarse, que presenta los problemas de CORS.

la ruta es lo que usaremos dentro de nuestro proyecto Ionic para enviar solicitudes al servidor de destino, el proxy Ionic 5 se encargará de enviar las solicitudes al servidor API de destino real.

Utilice el proxy Ionic 5

Ahora, ¿cómo usar estos valores dentro del código del proyecto?

Para usar el proxy Ionic 5, debe reemplazar la base de cualquier URL al servidor de destino con el valor de la ruta. Y deje que Ionic 5 haga el trabajo duro de enrutar las solicitudes de API al servidor de destino.

Conclusión

Los problemas de CORS pueden ser molestos si está desarrollando localmente con servicio iónico o si usa un dispositivo móvil real con la recarga en vivo habilitada, que son las únicas opciones viables en la fase de desarrollo. Si no tiene el control del servidor para actualizar los encabezados CORS, el proxy Ionic 5 puede ahorrarle muchos dolores de cabeza con solo agregar unas pocas líneas en el ionic.config.jsonarchivo.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas