IOS - Error Origin localhost:8080 - Plugin - cordova-plugin-ionic-webview

Hello,
I am facing problem in IOS.

Ionic Info


    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

    Cordova Platforms : android 7.0.0 ios 4.5.4
    Ionic Framework   : ionic1 1.1.0

System:

    Node : v8.9.4
    npm  : 5.6.0
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Plugins

cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-apprate 1.3.0 "AppRate"
cordova-plugin-audio-recorder-api 0.0.1 "AudioRecorderAPI"
cordova-plugin-camera 4.0.1 "Camera"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-inappbrowser 2.0.1 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-media 5.0.1 "Media"
cordova-plugin-media-capture 3.0.1 "Capture"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-x-socialsharing 5.2.1 "SocialSharing"
cordova-sms-plugin 0.1.11 "Cordova SMS Plugin"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-push 2.1.2 "PushPlugin"

Config.xml

  <access origin="*" />
    <access origin="cdvfile:*" /> 
    <access origin="http://localhost:8080" /> 
    <allow-navigation href="http://localhost:8080/*" />
    <allow-intent href="http://localhost:8080/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="http://www*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
.....
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
    <engine name="ios" spec="4.5.4" />
    <engine name="android" spec="7.0.0" />

Anyone can help?? This is pretty anoying…

1 Like
  1. Rua via localhost:8000 or run emulate/device that`s best practice.
  2. Look connection firebase too.
  3. Page origem access allow get data.

:+1:

1 Like

It working in android, regarding firebase its working properly even in ios.

1 Like

The only thing not working is a few pages who request to url to get some json data, is getting the error from no allowed request from origin localhost:8080 but i have defined everything in config.xml based on documentation

1 Like

Look your virtual machine network because Android works.
Try work on Android on virtual machine.

Look the effect!

1 Like

The problem is not your app. Not config.xml.

The problem is CORS. On iOS, Ionic uses CDVWebkitWebview, which uses the new webview on iOS. That new webview respects CORS settings.

The problem is that the server you are accessing is rejecting the cross-origin request. If you inspect the network requests, you will see an OPTIONS call. That call is getting an error back, so the webview says “Hey, I can’t access that URL.”

There are 2 solutions to this:

  1. Use the native HTTP plugin, which bypasses CORS completely, or
  2. Change the server to allow the network request. If you have control of the server, you can do that. If not, you need to use option #1.
2 Likes