Esta es el arreglo más correcta que encomtrarás compartir, pero primero obsérvala detenidamente y analiza si se adapta a tu trabajo.
Solución:
Al desarrollar localmente utilizando ionic serve o ionic run/emulate -l -c con livereload habilitado, ionic crea un servidor de desarrollo local en el puerto 8100 de forma predeterminada (http://localhost:8100/ ). los origin en este caso es localhost:8100 que cuando contacta a un servicio externo a través de HTTP con CORS habilitado, considera que la solicitud no es confiable y, por lo tanto, la rechaza.
Como lo sugieren los mismos Ionic (http://blog.ionic.io/handling-cors-issues-in-ionic/), puede crear un alias de proxy dentro de la aplicación Ionic para enrutar las llamadas API, evitando el origin problema en conjunto, sin embargo, su guía era específica para Ionic 1, por lo que aquí hay una actualización para Ionic v2.
Creando un Proxy en Ionic v2
Abierto ionic.config.json y agrega lo siguiente proxies configuración.
"name": "project-name",
"app_id": "xyz-projectid",
"v2": true,
"typescript": true,
"proxies": [
"path": "/api",
"proxyUrl": "https://the-real-api-host.com"
]
En este caso, estamos creando una ruta dentro de la aplicación iónica en /api que reenviará las solicitudes al punto final https://the-real-api-host.com . Si quisiera usar un punto final de API diferente, por ejemplo http://my-custom-api.com/api/v2/ podrías insertarlo en proxyUrl en lugar de.
Actualización de referencias al punto final de la API
En el código de su aplicación, ahora debe actualizar todas las referencias de la URL base para el extremo de la API en https://the-real-api-host.com con /api . una llamada a /api debe ser detectado cuando está en el servicio Ionic y enviado a la dirección real.
La implementación de cada proyecto puede variar. En mi caso, no tenía el control de la API, ya que era un servicio externo, por lo que no podía controlar el manejo/respuestas de CORS yo mismo.
Nota: recuerda reiniciar el servidor (ionic serve) o obtendrá 404 de su llamada a la API porque aún no será proxy.
La creación de proxy solo funciona cuando ejecuta Ionic en su navegador usando ionic -serve. El problema de CORS sigue siendo un problema cuando se ejecuta en su dispositivo, especialmente en iOS con WKWebView.
En esos casos, puede usar el complemento HTTP nativo de Cordova.
Ver aquí para más detalles:
https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664
Si no tiene forma de cambiar la configuración del servidor, debe usar el complemento nativo Http para realizar solicitudes Http desde su dispositivo móvil, para evitar problemas de cors. Sin embargo, en el entorno web aún necesita usar HtttClient de Angular. Afortunadamente, con la biblioteca ionic-native-http-connection-backend puede usar el mismo servicio HttpClient para ambos entornos, y Http native se usará internamente si la aplicación se ejecuta desde un dispositivo móvil. Es una especie de envoltorio.