0
411
VistasSolicitudes de la API de la aplicación Ionic/Capacitor React que devuelven HTML en iOS
El comportamiento actual:
Todas las solicitudes de API al servidor localhost devuelven el archivo index.html de la aplicación React.js en la compilación de iOS, pero las solicitudes funcionan bien en las compilaciones de navegador y PWA.
El comportamiento esperado:
Las solicitudes devuelven los datos previstos (generalmente JSON).
Detalles
Por lo general, las solicitudes de API van a http://localhost:3000/api/[ruta]. En la compilación de iOS, van a capacitor://localhost/api/[ruta]
Debido a que la ruta devuelve datos HTML y no JSON, recibo el siguiente error (uno de muchos, ya que cada ruta API tiene el mismo error) que genera una pantalla en blanco:
TypeError: undefined is not a function (near '...a.map...')Intenté agregar un nombre de host (ubicación donde se aloja el servidor de producción) al archivo capacitor.config.json en mi directorio raíz, pero aún falla. El servidor API de desarrollo se ejecuta en localhost:3000.
También intenté configurar el nombre de host del servidor en "localhost: 3000" en la configuración.
"server": { "hostname": "localhost:3000" },"http" no está permitido como iosScheme como se menciona en los documentos para la configuración del condensador: no se puede configurar en 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 cualquier otra compilación que no sea esta compilación de iOS, el problema debería estar aquí...
¿Cómo puedo enrutar mis solicitudes en la compilación de iOS para dirigirlas a la ubicación correcta?
Actualizar
Si configuro la opción server.url en el archivo capacitor.config.json en https://www.website.com , puedo extraer datos de mi servidor de producción, pero cuando la verificación de autorización devuelve un 401, la aplicación parece colgarse en la pantalla de inicio y el único mensaje de error que recibo en la consola es que la respuesta devolvió un 401 (como se esperaba)
Salida de la consola del dispositivo: 
Salida de la consola XCode: 
2 Respuestas
Responde la pregunta0
El primer problema se solucionó configurando el parámetro server.url en el archivo capacitor.config.json en la URL del servidor de producción:
"server":{ "url":"https://www.website.com" }El segundo problema fue asegurarse de que el código oculto de la pantalla de bienvenida de @capacitor/splash-screen se implementara realmente en prod en el archivo index.js.
import { SplashScreen } from '@capacitor/splash-screen'; setTimeout(() => { SplashScreen.hide(); }, 2000);0
Por la poca información que me has proporcionado intentaré adivinar qué es lo que falla.
- Está utilizando direcciones URL relativas en lugar de direcciones URL absolutas. Si realiza una llamada XHR/fetch a
/api/[route], el navegador agregará el esquema y el nombre de host y lo convertirá encapacitor://localhost:3000/api/[route]. Esa URL pertenece a la aplicación, no al servidor web donde se ejecuta su API. - Está utilizando localhost, localhost significa "esta máquina", si ejecuta la aplicación en un navegador o en un simulador de iOS, localhost es la máquina donde se ejecutan el navegador, el simulador y el navegador, y el servidor local también se ejecuta en la misma máquina. para que no tengan ningún problema en acceder a él. Pero si ejecuta en un dispositivo real, localhost es el dispositivo y el dispositivo no tiene un servidor en ejecución. Debe usar la IP local (números) de la computadora donde se ejecuta el servidor, y el dispositivo debe estar conectado a la misma red para poder acceder a él.
- Las aplicaciones de condensadores se ven "afectadas" por CORS, necesita configuraciones de servidor especiales para permitir las conexiones https://ionicframework.com/docs/troubleshooting/cors .
Parece que estás en el punto 1, una vez que lo arregles, llegarás al punto 2 y luego probablemente al punto 3 después de eso.