Ionic 4 HTTP CORS Issue

Nov. 7, 2018

Ionic 4 is a major upgrade to previous version of Ionic. One of the primary differences between Ionic 4 and its previous incarnations is that Ionic 4 uses web components, which are custom HTML elements written using web standards (as opposed to using a slap-on framework such as Angular).

Ionic 4 also makes a fundamental change in how the created app is rendered (I use rendered as apps are essentially HTML which is rendered using the native WebView control of the device's UI framework) in a device. While earlier versions used to refer to the top level index.html using file:// URI scheme, Ionic 4 internally spins up an HTTP server on localhost (yes for each app) and then loads the index.html through a standard HTTP request such as http://localhost:port/index.html.

Problem {#problem style="text-align: left;"}

I'm not sure what necessitated this change, but I reckon it probably had something to do with native API restrictions, which in turn was prompted by need for improved security. This, however, introduces a new (and common) problem. If your app interfaces with a remote server using HTTP requests, and you use the Angular HttpClient for making the requests, the remote server would typically reject the request as it would detect the request as coming from a different domain (domain would localhost) than the domain where it's hosted. This is due to CORS rules as set in the server configuration, which by default is set to reject all cross-domain requests.

Solution {#solution style="text-align: left;"}

You really have two options to solve this:

If you own & manage the server, change its CORS setting to allow requests from any domain
If you don't have control over the server or are reluctant to change the server's CORS setting, you have to switch to Ionic's native HTTP API to make HTTP requests.

Second options seems simple enough, but then it has another drawback. Native APIs are typically only available on the device and the HTTP native API happens to be one of them. Therefore using it means you won't be able to develop in the much quicker browser environment from your computer. This is where [[ionic-native-http-connection-backend]](https://github.com/silkimen/cordova-plugin-advanced-http) is installed and available for use and if so uses it. If it's not available or can't be used owing to the app being run on the browser, it defaults to Angular's native backend. So you get the best of both worlds!

Installation Woes {#installation-woes style="text-align: left;"}

When I tried to install [cordova-plugin-advanced-http] again and it succeeded.

Conclusion {#conclusion style="text-align: left;"}

I'm not sure how stable [ionic-native-http-connection-backend](https://github.com/sneas/ionic-native-http-connection-backend) is, but if the rather minuscule [open issue](https://github.com/sneas/ionic-native-http-connection-backend/issues) count is anything to go by, I'm willing to take my chances with it for now.