Ionic 2 iOS [Error] XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin

Ionic Framework ionic-v3
1

I’ve built the ionic 2 app with integration with CordovaSalesforceSDK. I can’t fire any http request to any server and it get the following error every single time.

[Error] XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/distancematrix/json?units=matric&origins=18.800236,98.970507&destinations=18.802630,98.967335. Origin null is not allowed by Access-Control-Allow-Origin.

Any way I can load my local resource such as the project html file, js, css and all. but when it comes to http request it will error as previous example.

Cordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.1
ios-sim version: 5.0.1
OS: macOS Sierra
Node Version: v7.7.1
Xcode version: Xcode 8.3 Build version 8E162

​​Note that I use platform ios@4.3.0 according to SalesforceCordovaSDK plugin requirements.

I also use the whitelist plugin and CSP as follows:

<meta http-equiv="Content-Security-Policy" content="img-src * blob: android-webview-video-poster: cdvphotolibrary: 'self' data: file://*; default-src * blob: 'self' gap: wss: ws: data: file://*; style-src 'self' 'unsafe-inline' file://* https://maps.googleapis.com/; script-src 'self' 'unsafe-inline' 'unsafe-eval' file://* http://www.google-analytics.com/; connect-src * http: https:;">

Thanks in advance.

2

For now I have to use this plugin:

Make it calling API instead, with a drawback to have to test it on real device or emulator only, cannot use ‘ionic serve’