ionic ios app cannot access internet

Question

When I run my ionic application in the emulator:

ionic emulate ios --target="iPhone-6"

I have no issue accessing the internet. However when I try running the app from XCode after calling

ionic build ios
cordova prepare

The app cannot access the internet.

I have added the cordova-plugin-whitelist plugin to my app, as well as adding

<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

to my config.xml

and

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">

to my index.html

The code:

import { Headers, Http, Response } from '@angular/http';
...
public login(url: string, params: any): Observable<any> {
    return this.post(url, params) //I have logged the URL and it's fine!
        .map((response: any) => {
            ...
        })
        .catch((error) => {
            console.log("Error: " + JSON.stringify(error)); 
        });
}

The error output is as follows:

{
    "_body": {
        "isTrusted": true
    },
    "status": 0,
    "ok": false,
    "statusText": "",
    "headers": {},
    "type": 3,
    "url": null
}

I have looked at the following:

1. Get error message from Angular 2 http
2. https://forum.ionicframework.com/t/ionic-run-android-works-but-apk-does-not-access-internet/3867
3. https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/

EDIT
I have seen that there is still an open issue on the ionic-cli github page that relates to this.

EDIT 2

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.30
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra Node Version: v6.7.0
Xcode version: Xcode 8.1 Build version 8B62

Answer 1

Have you taken care of App Transport Security?

Since iOS9, Apple requires you to either allow specific domains in your info.plist or explicitly allow all external loads (which isn't recommended by Apple, but would be the easiest testcase to see if the problem is caused by ATS).

More about App Transport Security: https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ In your info.plist

Basically you have to specify the following in your info.plist (again: the general allowance of external loads is not recommended though, you can find detailed information on how you can specify domains by following the link above :) ):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <!-- other stuff -->

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>

    <!-- other stuff -->
  </dict>
</plist>

Answer 2

So according to this SO Answer:

Safari can be used to debug an Ionic app on a connected iOS device. First, we need to enable Web Inspector on the connected device. Web Inspector can be found under Settings > Safari > Advanced. Next, head over to the Safari on your Mac and enable Show Develop menu in menu bar under Safari > Preferences > Advanced. The connected device should now appear in the Develop menu. From there, you can inspect it and use Safari's developer tools to debug your application!

Which led me to debug the iOS app on the emulator (which now also refused to connect to the internet) using Safari. I saw the error:

Refused to connect to https://.../login because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy.

It turns out METEOR has had a similar issue in the past, but was resolved on cordova by adding the following line:

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

Which has me accessing web services!

Answer 3

I solve it by adding below code into backend index page (my backend was CI)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept,Authorization, X-Request-With');
header('Access-Control-Allow-Credentials: true');

and use below code for fetch data from mobile end using API

 let postParams = {
        id: "1"
    };
let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      let options = new RequestOptions({
          params: postParams,
          headers: headers,
          withCredentials: true,
      });

      this.http.post("Enter your API URL",JSON.stringify(postParams), options)
      .map(res => res.json())
      .subscribe(data => { 
          console.log(data);
      },(err => {
          console.log(err);
      }));

Answer 4

I have been working on an ionic 3 Project and i was also facing an issue where ionic ios app was not able to connect to internet and always gave error of --> {"isTrusted"=true} but never connected to internet ... i also tried everything from applying custom meta tags , proxy in ionic.config.json and ever other on given on the internet but my problem got solved by removing one plugin named as webkit plugin especially for ios ... on android app worked well with the plugin but was causing issue on ios 9 and above .