CORS works on Chrome but not on Safari or on iOS device

@DrTomato wrote:

Hello,

I make this story longer than strictly necessary in the hope that others will find my explorations useful.

I want to use HttpClient (from @angular/common/http) to load a static JSON file from a hosted web site. I want the same code to run in both browsers and on devices and therefore want to avoid using the native HTTP plugin.

My first loading attempt failed with CORS (Cross-Origin Resource Sharing) errors. I ran ionic serve on both Chrome and Safari as well as the installed app on my iOS device to no avail.

I therefore configured the server (Apache) to allow CORS by adding an .htaccess file with the following contents to the appropriate directory:

Header set Access-Control-Allow-Origin "*"

This made ionic serve work for Chrome but not for Safari. Loading on the device did not work either.

I then disabled cross-origin restrictions in Safari by selecting the menu item:

Develop | Disable Cross-Origin Restrictions

This made ionic serve work on Safari.

Since Ionic’s default VKWebView container is CORS-compliant I swapped it for the older non-compliant container UIWebView by adding the following line to config.xml:

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

This made loading on the device work, which means I sort of accomplished my goal. However, I am not really happy with this solution since I want to understand what is going on. I would prefer to use the VKWebView container since it is the new default container with supposedly better performance than the old one. But no matter what CORS setting I add to the .htaccess file on Apache, I can’t make neither the app nor Safari to work ‘out-of-the-box’.

My question is therefore:

• Has anyone managed to configure a server with explicit CORS settings for use from Safari and installed apps, using the regular HttpClient component and the WKWebView container? If yes, with which settings? I assume that the root cause is how WebKit handles CORS since WebKit is supposedly used by both Safari and the WKWebView container.

I have tried the native HTTP plugin and it works on the device but obviously not in the browser. I have also tried the https://github.com/sneas/ionic-native-http-connection-backend plugin (which hides native HTTP calls behind the HttpClient interface) but I never got it to run past app initialization.

Posts: 1

Participants: 1

Read full topic