How to Fix CORS Issues with Native HTTP Calls [v4]

ionic-cors-native-http

If your Ionic app is making requests to a server or API you normally control the server and easily overcome CORS issues. The problem is, what to do if you don’t control the API or simply can’t change it and therefore can’t get your Ionic app working?

In this Quick Win we will use an additional Cordova plugin to transform our Javascript HTTP calls into native HTTP calls which will then not be blocked by any server!

The CORS Issue

Let’s talk about the problem you are facing real quick. You have found an API, perhaps you have started the Ionic Academy Crash Course and encountered a strange error that looks like this:

ionic-cors-native-http

You can also read about CORS in detail here. Basically, your Ionic App runs at something like http://localhost:8100 or a bit different URL on a device though.

Now if you request something like http://swapi.co/api/films, that API is on a different domain and a Javascript request is forbidden by default due to the same-origin policy.

When you encounter an error like this you got 3 options:

While the last option sounds strange, it’s actually what we can easily implement and will do now!

Note: If you have the chance to set the right headers on your server do that instead – it’s a lot easier for all of you.

Setting up Our App

Right now we just need a little app to test things out so go ahead and install the native HTTP cordova plugin:

To make HTTP calls we also need to import the HttpClientModule to our app/app.module.ts and also add the just installed plugin to our providers so go ahead:

Now we are ready to use the plugin!

Making Native HTTP Calls

Before we can make the calls, we need a little view so we can actually show the results and also trigger our different actions. Therefore, simply change the app/home/home.page.html to:

To show the difference we need an API that will block our requests, but actually the SWAPI works pretty well so far – but if you make a call to the non SSL version at http:// you will encounter the same problem again.

So while you normally simply use the HttpClientModule to make your API requests – you can now also use the nativeHttp plugin that we just installed to make the same request but not from Javascript!

Of course this solution now won’t work inside your browser as you are using a Cordova plugin, so if you want to have it working in both places you might need a switch for the Platform like shown in the third function.

To add our functionality, simply change the app/home/home.page.ts to:

As you can see, the Cordova plugin will return a Promise instead of the Observable you are used to. Therefore, you need to convert it using from() if you want to use the same control flow like with your other Http calls.

Also, the data returned is sometimes not converting the JSON data of the body correctly. That’s the reason why we have to add another JSON.parse() once we get the API data!

PS: You can also add the browser platform using Cordova, then the plugin will also work in the browser version!

Conclusion

If you have no chance to set the appropriate headers on your server or can’t get the maintainer to change them, you still got a way to fix CORS issues.

By making your Http calls through a Cordova plugin we shift the calls away from Javascript into native calls.

The downside is, using the code on both app and browser gets more complicated, we have to work with Promises again and also the returned data is sometimes not well formatted like we are used from our standard http calls.

You can also find a video version of this Quick Win below.

Leave a Reply

Your email address will not be published. Required fields are marked *