Ionic/Capacitor React App API Requests returning HTML on iOS-CodePudding

The

XCode console output:

CodePudding user response：

By the little information you have provided I'll try to guess what's wrong.

You are using relative urls instead of absolute urls. If you make a XHR/fetch call to /api/[route], the browser will append the scheme and host name to it and will turn it into capacitor://localhost:3000/api/[route]. That url belongs to the app, not to the web server where you API is running.

You are using localhost, localhost means "this machine", if you run the app in a browser or iOS simulator, localhost is the machine where the browser and simulator and browser are running, and the local server is also running on the same machine, so they don't have any problem accessing it. But if you run on a real device, localhost is the device, and the device doesn't have a server running. You should use the local IP (numbers) of the computer where the server is running, and the device should be connected to the same network for being able to access it.

Capacitor apps are "affected" by CORS, you need special server configurations to allow the connections https://ionicframework.com/docs/troubleshooting/cors.

Looks like you are on the point 1, once you fix it you'll hit point 2 and then probably point 3 after that.

CodePudding user response：

The first issue was fixed by setting the server.url parameter in the capacitor.config.json file to the URL of the production server:

"server":{ "url":"https://www.website.com" }

Second issue was making sure the splash screen hide code from @capacitor/splash-screen was actually deployed onto prod in the index.js file.

import { SplashScreen } from '@capacitor/splash-screen'; setTimeout(() => { SplashScreen.hide(); }, 2000);