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
<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.