Wednesday, 22 December 2021

Ionic/Capacitor React App API Requests returning HTML on iOS

The current behavior:

All API requests to the localhost server are returning the index.html file of the React.js app on the iOS build, but requests work fine on browser and PWA builds.

The expected behavior:

Requests return the intended data (usually JSON).


Details

Typically, API requests go to http://localhost:3000/api/[route]. In the iOS build, they are going to capacitor://localhost/api/[route]

Because the route is returning HTML and not JSON data, I am getting the following error (one of many, as each API route, has the same error) which causes a white screen:

TypeError: undefined is not a function (near '...a.map...')

I tried adding a hostname (location where the production server is hosted) to the capacitor.config.json file in my root directory, but it still fails. Dev API server is running on localhost:3000.

Tried setting the server hostname to "localhost:3000" in the config as well.

"server": {
    "hostname": "localhost:3000"
  },

"http" is not allowed as a iosScheme as mentioned in the docs for the capacitor config: Can't be set to schemes that the WKWebView already handles, such as http or https](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/2875766-seturlschemehandler)

Because the site works on every other build other than this iOS build, the issue should be here...

How can I route my requests on the iOS build to direct to the correct location?

Update

If I set the server.url option in the capacitor.config.json file to https://www.website.com, I'm able to pull data from my production server, but when the authorization check returns a 401, the app seems to hang on the splash screen and the only error-like message I get in the console is that the response returned a 401 (as expected)

Device console output: Device console output

XCode console output: Xcode console output



from Ionic/Capacitor React App API Requests returning HTML on iOS

No comments:

Post a Comment