Cordova-plugin-ionic-webview: Unexpected CORS issue

[FarhadG]

Since this plugin supports both iOS and Android, I've switched from (https://github.com/apache/cordova-plugin-wkwebview-engine) to this module so that we have the latest engine for both platforms. I assume 1) this assumptions is valid.

That being said, we took all necessary steps to ensure our APIs are configured to handle CORS—even to the extent of allowing all origins via the wildcard (*), to test this plugin. It doesn't work! Although if I switch back to (https://github.com/apache/cordova-plugin-wkwebview-engine), everything works as expected.

This leads me to believe that 2) we're missing something in our Cordova application (not an ionic application) when using this plugin. I can't find anything in the documentation outside of simply adding the correct values to the config.xml file.

Here's a screenshot below of the requests that are rejected from the ionic origin protocol.

<?xml version='1.0' encoding='utf-8'?>
    ...
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="*" />
    <allow-navigation href="http://localhost:8080/*" />
    <allow-navigation href="http://localhost:8100/*" />
    <allow-navigation href="http://localhost:*/*" />
    <allow-navigation href="http://localhost:8083/*" id="baseUrl-local" />
    <platform name="android">
        <allow-intent href="market:*" />
        <custom-config-file parent="/*" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
        </custom-config-file>
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
            <string>We will check your current country when you open the app to ensure betting is allowed</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationAlwaysAndWhenInUseUsageDescription">
            <string>We will check your current country when you open the app to ensure betting is allowed</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationAlwaysUsageDescription">
            <string>We will check your current country when you open the app to ensure betting is allowed</string>
        </edit-config>
    </platform>
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashScreenDelay" value="0" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="FadeSplashScreenDuration" value="0" />
    <preference name="SplashScreenBackgroundColor" value="#04143a" />
    <preference name="cordova.plugins.diagnostic.modules" value="LOCATION NOTIFICATIONS" />
    <plugin name="cordova-custom-config" spec="5.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-device" spec="^2.0.2" />
    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
    <plugin name="com.testfairy.cordova-plugin" spec="~2.14.0" />
    <plugin name="cordova-plugin-dialogs" spec="^2.0.1" />
    <plugin name="cordova-plugin-inappbrowser" spec="3.0.0" />
    <plugin name="cordova.plugins.diagnostic" spec="^4.0.10" />
    <plugin name="cordova-plugin-network-information" spec="^2.0.1" />
    <plugin name="cordova-plugin-wkwebview-engine" spec="1.1.4" />
    <engine name="android" spec="^7.1.4" />
    <engine name="browser" spec="5.0.4" />
    <engine name="ios" spec="^4.5.5" />
</widget>

[jcesarmobile]

Can you provide some sample app? or source code?
I've not have problems accessing a web server when I've enabled CORS on it.
Are you using XHR? fetch?

[FarhadG]

@jcesarmobile

Thanks for the quick response, @jcesarmobile. I can build a simple Cordova application to share if that's useful. That being said, we're using fetch.

Here are the errors that I'm seeing in addition to the images posted above:

[Error] Fetch API cannot load http://sportsbooknj.aws-us-east-1.gpd.williamhill.plc/api/sideNavigation due to access control checks.
[Error] Failed to load resource: Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers. (sideNavigation, line 0)
[Error] Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers.

It doesn't seem any of these requests are being sent to the API. Am I missing something in the configuring Cordova to leverage this plugin?

[jcesarmobile]

Looks like a server configuration problem to me, but still, if you provide a sample project it can be helpful.
Anyway, I don't have access to the url you are having problems with, so will be hard to test.

[FarhadG]

Thank you, @jcesarmobile ! All resolved! It was, indeed, a server configuration.

[fraygit]

@FarhadG
We are having the same issue, what was the server configuration you did to fix the issue? Thanks.

[FarhadG]

@fraygit After seeing this sample REST API does work with this engine, we carefully inspected the network and ensured our server was handling the request/responses in the same way:

https://jsonplaceholder.typicode.com/

Good luck!