Cordova-plugin-ionic-webview: Two Origins not ideal for CORS header

[NiklasMerz]

Since version 3.0.0 this plugin now uses ionic://localhost for iOS and http://localhost for Android. The Access-Control-Allow-Origin header only allows one value? Using * is not possible for requests with credentials.

What can we do about that?

[AMerkuri]

I had same problem on dotnet https://stackoverflow.com/questions/54091699/aspnetcore-2-2-api-cors-policy/54092857#54092857

[NiklasMerz]

@AMerkuri Thanks. I can set multiple origins but Android does not accept a header with with two origins.

[AMerkuri]

Do not use *. Read origin request header from the client and set Access-Control-Allow-Origin value to that.
https://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains

[NiklasMerz]

This is not a solution for. The server reads the header from a static configuration.

I don't want to allow any origin, either. Just the Ionic App.

[jcesarmobile]

Well, this depends entirely on your server as there are a lot of types of servers and each one is configured in a different way.
What you need to do is to check the origin and return it if valid.
If you can't use server code to do that, you can probably still do it using a regular expression in a .htaccess file

[NiklasMerz]

Thanks. I cannot change the header programmtically in this case.

The solution I did for now is to disable the webserver on Android. Is this worth a PR or is it unlikely to be merged? I just need this plugin for WKWebView for now and I don't know why the http protocol is necessary on Android.

[jcesarmobile]

I don't think it will be merged

[NiklasMerz]

The http routing is for Ionic 4 with Angular routing correct? Serving from ionic://localhost on Android is not possible?

I would like to have the option for one origin for both platforms. It was possible with version 2.3.x. Two different origins cause extra headache for developers and may be impossible for certain servers.

[jcesarmobile]

Yeah, using ionic:// is technically possible, but have some problems like not being able to use getUsermedia, geolocation and some other features that require https or localhost.

We might consider making the scheme configurable so people can use what suits best for them.

[NiklasMerz]

Yeah, using ionic:// is technically possible, but have some problems like not being able to use getUsermedia, geolocation and some other features that require https or localhost.

Thank you. I was not aware of these limitations.

We might consider making the scheme configurable so people can use what suits best for them.

Sounds perfect. I will try that out, too.

[agil-NUBBA]

Hi,

Still thinking how to manage this in a clean way:

if(isset($_SERVER['HTTP_ORIGIN']) && preg_match('/^(http|ionic):\/\/localhost(:)?(\d+)?$/', $_SERVER['HTTP_ORIGIN'], $matches)) {
    header("Access-Control-Allow-Origin: {$matches[0]}");
}

As far as I have tested origin seems to be:
Android: http://localhost:port
iOS: ionic://localhost

[jcesarmobile]

Now on 3.1.0 you can configure the Scheme for Android using this preference <preference name="Scheme" value="ionic" />, so you can make it match the iOS one. But still, I would try to avoid it as some things won't work when using this scheme, use it only when there is no way of configuring the server to allow both origins.