Ionic request doesn't work only on IOS

Ionic Framework Ionic Angular
1

Hi all, i have an app with ionic and Angular that work fine on web and on Android device but i have this error on IOS device:

[error] - ERROR {“headers”:{“normalizedNames”:{},“lazyUpdate”:null,“headers”:{}},“status”:0,“statusText”:“Unknown Error”,“url”:“xxxxxxxxx/competition/getall”,“ok”:false,“name”:“HttpErrorResponse”,“message”:“Http failure response for xxxxxxxx/competition/getall: 0 Unknown Error”,“error”:{“isTrusted”:true}}

where xxxxxxx is my base address.
Where is the problem and how i can solve?

2

Can you give some more details what are you trying to do ?

In general API calls are not dependent from systems but from request.
Are you giving the proper/same request for the call ? (compare with web version).
Maybe you are using some data from storage and its not working in IOS ?

3
4

Hi, in this case no usage of storage.
The first call opening the app is a simple GET that work correctly on the web.

I paste here the request:
https://www.laps5.it:3000/cars/all

You can test in browser and it work fine.
If i try the IOS app on xcode emulator i have this error:
[error] - ERROR {“headers”:{“normalizedNames”:{},“lazyUpdate”:null,“headers”:{}},“status”:0,“statusText”:“Unknown Error”,“url”:“https://www.laps5.it:3000/cars/all",“ok”:false,“name”:“HttpErrorResponse”,“message”:"Http failure response for https://www.laps5.it:3000/cars/all: 0 Unknown Error”,“error”:{“isTrusted”:true}}

5

Solved!

It’s cors problem
On IONIC CAPACITOR it must be added to server side CORS to enable this:
‘capacitor://localhost’,

1 Like
6

Hello Flaterik
I got exactly same issue. I have a application with angular 8, implemented android and ios app with capacitor js. This is working fine on web and android area but facing same issue on ios.

Can you please tell me where to add this code ‘capacitor://localhost’?

In my capacitor.config.ts file:

import { CapacitorConfig } from ‘@capacitor/cli’;

const config: CapacitorConfig = {
appId: ‘com.example.app’,
appName: ‘video-app’,
webDir: ‘dist/video-app’,
bundledWebRuntime: false,
server: {
allowNavigation: [‘abcd.com’],
hostname: ‘abcd.com’,
androidScheme: ‘https’,
iosScheme: ‘https’,
cleartext: true,
url: ‘https://abcd.com/’
},
plugins: {
CapacitorHttp: {
enabled: true,
},
},
android: {
allowMixedContent: true
}
};

7

Hi,
i put ‘capacitor://localhost’ on my main.ts file of nestjs backend project.
I put it under:
app.enableCors ( {
origin: [
‘xxxx’,
‘capacitor://localhost’
]

I don’t know what Backend you are using, but i solved my problem adding this line on my CORS system

8

Thank you for quick response.
I am using laravel as backend. Do you have any idea about this? I am checking also on laravel section.

9

Try to find here if ther’s a solution for you.

10

Hey! Nice to see another Laravel dev.

In my cors.php config file, I have the following:

'allowed_origins' => [
    'http://192.168.86.63:8100',        // Local development
    'http://localhost:8100',            // Local development
    'capacitor://localhost',            // iOS
    'http://localhost',                 // Android
    'https://localhost',                // Android
],