iOS App can't connect to internet

Ionic Framework ionic-v3
1

Hi guys,

I did a ionic app with ionic-angular version 3.0.1 and, while in the web-app (using ionic serve and proxies) and in android everything works perfect, i have problems with iOS.
I tried practically everything what i found here in the forum and in stackoverflow, but nothing worked.
Why I can’t communicate with the server with iOS?
If it’s useful, I tell you also that i use HTTPS and that the server has the certificate of Let’s Encrypt.

Here there is my ionic info

cli packages:

    @ionic/cli-plugin-cordova       : 1.5.0 (/Users/lorenzo/Documents/iwcard/iwcard/node_modules/@ionic/cli-plugin-cordova)
    @ionic/cli-plugin-ionic-angular : 1.4.0 (/Users/lorenzo/Documents/iwcard/iwcard/node_modules/@ionic/cli-plugin-ionic-angular)
    @ionic/cli-utils                : 1.6.0 (/Users/lorenzo/Documents/iwcard/iwcard/node_modules/@ionic/cli-utils)
    ionic (Ionic CLI)               : 3.6.0 (/Users/lorenzo/Documents/iwcard/iwcard/node_modules/ionic)

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.0.1

System:

    Node    : v6.11.0
    OS      : macOS High Sierra
    Xcode   : Xcode 8.3.3 Build version 8E3004b 
    ios-sim : 6.0.0 
    npm     : 5.3.0

And here my ionic cordova plugin list:

cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-transport-security 0.1.2 "App Transport Security"
cordova-plugin-whitelist 1.3.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

In my config.xml i have these lines:

    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="*" />
    ...
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
            <dict>
                <key>NSAllowsArbitraryLoads</key>
                <true />
            </dict>
        </config-file>
    </platform>

And in src/index.html i added this meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">

I really don’t have any clue on how it’s possible to fix this huge issue and it’s incredible that in the browser and on android everything is working perfectly but in iOS not.
Thank you in advance for your answer.

Cheers

netlopa

2

What exactly happens on iOS?

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

3

Ok, now i ran the Safari Inspector and i see this error:

Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to https:// ...  be "www. ... " which could put your confidential information at risk

What does it mean and how i can workaround this?
As I said the server i use has Let’s Encrypt for HTTPS: and I checked also that the certificate is valid.
All browsers except Safari don’t make any warning about the certificate.
That’s strange

4

Does the certificate work in Safari on iOS directly? If not, something is wrong with the certificate setup probably.

5

Refer to this link -> https://stackoverflow.com/a/47475313/6142098

6

Hey Netlopa, Have you found the solution ?

7

Hey @shashiCR , in reality for me the problem was simple.
I was using a VM of MacOS but it was not synchronizing the time (so the time of the MacOS VM was like 1 month before the true time).

So for the MacOS VM the certificate was invalid for the time mismatch: so I solved this by moving it to the correct one

8

@netlopa Thanks for the reply , in my case error message is -> Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. although when running in android there is no such CORS error. Can you tell me how and why it is happening ?