cordova - XMLHttpRequest Faults after WKWebView Upgrade on Ionic v1 project/app

Question

After trying to upload my working app to the store, I was encountered with an error message from app store connect saying that I'm not able to use the UIWebview anymore since it's been deprecated so I've been forced to upgrade to WKWebView.

I followed the answer for this question

When I now try and log into my app, I get these errors on the Safari console:

Origin ionic://localhost is not allowed by Access-Control-Allow-Origin

XMLHttpRequest cannot load https://www.demo.mywebsite.com/mobile/pages/login due to access control checks

Failed to load resources: Origin ionic://localhost is not allowed by Access-Control-Allow-Origin.

In my config.xml I have this

<access origin="http://localhost:8080/*" />
<allow-navigation href="*" />

I also set the headers on my server PHP files via this way:

header("Access-Control-Allow-Origin: http://localhost:8080/*");
header("Content-Type: application/json");
header("Access-Control-Allow-Headers: content-type,authorization");
header("Access-Control-Allow-Credentials: true");

I have my website hosted on Windows Server 2016. Prior to the WKWebView upgrade, it was all working fine but now, i'm not able to use the app at all as it contains a lot of HTTP requests.

UPDATE

I've just made these changes:

<access origin="*" />
<allow-navigation href="*" />

As well as this on my server file:

header("Access-Control-Allow-Origin: *");

I no longer get the ionic://localhost error and the Failed to load resources error but I am getting this error:

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

question from:https://stackoverflow.com/questions/65851199/xmlhttprequest-faults-after-wkwebview-upgrade-on-ionic-v1-project-app

Answer 1

config.xml

Access
? Define the set of external domains the app is allowed to communicate with. The default value shown above allows it to access any server. ? See documentation.

This setting has nothing to do with the origin of your app when performing requests.

According to your config.xml, your app is only allowed to communicate with http://localhost:8080/*. You obviously want to use * here (or your server url if your app only makes requests to your server).

<access origin="*"></access>

WKWebView

iOS Preferences
? Since version 3, apps are served from ionic:// scheme on iOS by default.

The default origin for requests from the iOS WebView is ionic://localhost. If Hostname and iosScheme preferences are set, then origin will be iosSchemeValue://HostnameValue.

Values like http, https or file are not valid and will use default value instead. ?
See documentation.

On your server, you need to allow the origin ionic://localhost.
Assuming you want Android devices to able to communicate with your server as well, you need to allow both ionic://localhost and http://localhost, or * to allow all origins.

Server

You can allow both origins in your server like that for example.

$allowedDomains = ['ionic://localhost', 'http://localhost'];

if (in_array($_SERVER['HTTP_ORIGIN'], $allowedDomains)) {
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
}