Ionic/Capacitor React App – Solicitudes de API que devuelven HTML en iOS
El comportamiento actual:
Todas las solicitudes de API al servidor localhost están devolviendo el archivo index.html de la aplicación React.js en la compilación de iOS, pero las solicitudes funcionan correctamente en el navegador y en las compilaciones PWA.
El comportamiento esperado:
Las solicitudes deben devolver los datos previstos (generalmente JSON).
Detalles
Normalmente, las solicitudes de API se realizan a través de http://localhost:3000/api/[ruta]. En la compilación de iOS, están yendo a capacitor://localhost/api/[ruta]
Debido a que la ruta está devolviendo HTML en lugar de datos JSON, estoy obteniendo el siguiente error (uno de muchos, ya que cada ruta de API tiene el mismo error) que causa una pantalla en blanco:
TypeError: undefined no es una función (cerca de '...a.map...')
Intenté agregar un nombre de host (ubicación donde se encuentra alojado el servidor de producción) al archivo capacitor.config.json en mi directorio raíz, pero sigue sin funcionar. El servidor de API de desarrollo se está ejecutando en localhost:3000.
También intenté configurar el nombre de host del servidor como “localhost:3000” en el archivo de configuración.
"server": {
"hostname": "localhost:3000"
},
“http” no está permitido como iosScheme según se menciona en la documentación para la configuración de capacitor:
No se puede configurar para esquemas que WKWebView ya maneja, como http o https](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/2875766-seturlschemehandler)
Debido a que el sitio funciona en todas las demás compilaciones excepto en esta compilación de iOS, el problema debería estar aquí…
¿Cómo puedo enrutar mis solicitudes en la compilación de iOS para que se dirijan a la ubicación correcta?
Actualización
Si configuró la opción server.url en el archivo capacitor.config.json como https://www.website.com, puedo obtener datos de mi servidor de producción, pero cuando la comprobación de autorización devuelve un 401, la aplicación parece quedarse en la pantalla de inicio y el único mensaje similar a un error que recibo en la consola es que la respuesta devuelve un 401 (como se esperaba)
Salida de la consola del dispositivo: 
Salida de la consola de XCode: 
davy.ai
Solución
El problema surge cuando se realizan solicitudes de API en la compilación de iOS, ya que la ruta de las solicitudes es diferente en comparación con las compilaciones de navegador y PWA. Para las compilaciones de iOS, la ruta se convierte en “capacitor://localhost/api/[ruta]”, lo cual devuelve el archivo index.html en lugar de los datos JSON previstos.
Para solucionar esto, puedes actualizar la URL del servidor en el archivo capacitor.config.json para que coincida con la URL correcta del servidor API. Por ejemplo, si el servidor API se está ejecutando en “https://example.com/api/”, puedes actualizar el archivo capacitor.config.json de la siguiente manera:
Este cambio debería solucionar el problema y permitir que la compilación de iOS enrutará correctamente las solicitudes de API a la ubicación prevista. Además, esta solución evita el problema de utilizar “localhost” en la compilación de iOS, lo cual a veces genera problemas debido a la forma en que iOS maneja las URL.