How to Fix Ionic CORS Issues with Proxy or Native HTTP

hey simonix what's up welcome to a new ionic tutorial today we're talking about a topic that usually brings a lot of issues and that is course so usually if you make an api call to your api to your backend back-end the back-end has to enable some functionalities for your ionic application or web application to allow that request because usually for example you're testing out your application runs on http uh whatever port and your backend runs on mybackend.com in that case the domains are different um if you have an enabled course this will result in an error and today we're gonna take a look at two different examples of how to fix this first one interesting one using a proxy it sounds actually more tricky than it is but we will check out a git repository make some changes and deploy to heroku in no time and the second option involves using the capacitor native http plugin which allows us to at least on a device perform these requests without any course issues as not the javascript implementation for an http call will be used but the native version instead let's take a look at the problem first and then go through both implementations to finally solve any course issue that you might encounter i assume that you already encountered the chorus issue so otherwise you wouldn't check out this video um therefore i created a little application up front i injected the http client module or imported it and then created a basic uh class to make a get request to the age of empires api it was actually hard to find an api that doesn't come with core support these days but this is one of them so if i now check out the application i click load data and i get an error you know access and blah blah blah has been blocked by course policy no access control origin header is presented on the requested resource now how can we fix this um first of all once again recommendation is definitely to talk to your back-end team or work on the back-end if you control it and just enable course that would be uh really the easiest solution it's not a big deal you can easily add this to your application but if this is not in your power or you can't talk to them they don't want to implement it in that case uh you can still take steps to fix this problem yourself and there is a cool package called course anywhere um this is actually hosted and you can directly use it so you can simply use this url and put it right here in front of your other url and then let's check out our application again and call load data once again and there we see we get data from the hf empires api but of course this is a hosted uh course uh server you don't really want to rely on it so uh let's quickly um uh clone this and host our own core server because it's really it just takes a few minutes so what we can do is we can first of all clone the git repository git clone the url of the git repository then we dive into the course anywhere and we're going to open it uh what we want to do in here is actually quite easy but before we get into the code i also um recommend that you remove the origin because [Music] so if you show the remote if you clone the repository from github you will have the still the repository as origin so in that case um just call git remote rm origin which will remove the origin so you don't push or commit anything to the repository just in case i think you can't do it anyway but that's just a little um additional security step now the question is what do we want to change in here uh if we check out the course server um we don't really need to understand what's going on the only interesting part is here the original whitelist and blacklist although i don't like the the term anymore um that's just what's implemented in the repository we want to allow access to the api from localhost whatever but if you also want to test it on a device um i got you covered i already prepared something upfront so this is the issue you see on ios fail to load resource this is now using capacitor origin capacitor localhost is not allowed so that's a little bit different origin than the one we got on localhost if we check out the same problem on android we will see that our origin now is once again http localhost so again a bit different therefore we can now go into the course server and instead of using um from the process environment although you could edit to the environment you can also just hard code it to allow your uh local host where ionic is usually running capacitor localhost and http localhost for android hit save and then we are basically almost done now we just need a way to host this somewhere and i usually recommend to host it on heroku um you can create a free account you can create a new application and once you're in your application you usually see commands to connect your repository to heroku in my case what i ran is hiroko git remote add the name of your project so that's really uh what you see inside heroku after you've created the project then you can commit your um changes which were just the change to the white list and then you push the code to heroku that's everything you need to do we don't want to save this and we don't really need this anymore and once you've done this you can go inside your application to settings and you should find your app under domains so we can now just copy this string and use it instead of the uh default one that course everywhere gives us and now we can run the application we can load the data and [Music] the course server needs to start because i used free dinos on heroku and we get the result so now we've implemented our own server really we just cloned we changed one line and uploaded it to heroku and we made the api work this is really just it's just too easy and for testing that's definitely a hundred percent fine now if you want a more robust uh solution for this that also works better in production because um i don't know if i would use this solution in production uh you get the delay from making a call to heroku we can use something else so the second solution to fix your ionic course issues is to use the capacitor native http client if you're still on cordova you can actually also use a cordova plug-in there's also a native hdp plug-in but since i always recommend capacitor you can now use this one so the first step is to call npm install capacitor community http plugin i already did this and run the capacitor sync afterwards you need to register the plugin for android in fact if you check out this video and capacitor 3 is already i think this step should happen automatically if you're still on capacitor 2 you need to find your main activity inside android app source main and import the plugin and edit within the init blog so perhaps you will already find it in there congratulations in that case you're on capacitor 3. now uh we need to change our logic inside the home page um a bit uh first of all we can import the plugin um so that's the standard import capacitor plugin and then import the plugins object so we can destructure it um maybe this might also change with capacitor three so not 100 sure about that but we will see now uh let's create a new function that we call get request um actually the only problem right now is that first of all uh in the web implementation the capacitor plugin won't add any uh benefit because we will still see the course issue um so we can also just rely on the standard hdp client um and perform the same request perhaps uh use our course on the web and for the native version we can then uh use the capacitor implementation therefore i added a check so if is platform from ionic angular um if we're uh maybe we just use capacity i think we can use capacitor as well so if the platform is capacitor we're going to use the new approach with the plug-in any other case uh we will use this call just once again so we're gonna return the standard call including the proxy that makes sure our http call works on the web fine for testing for localhost for whatever but if we are on our capacitor we can now uh extract the http plugin from uh no not from from the plugins object looks like this um it's recommended by capacitor to defer this uh destructuring to basically directly before you call a http plugin i don't know if there are any issues if you put this right at the top of your class so i just followed the advice and then the problem is that we can now return http dot uh request so there are a few other functions on the native http plugin um but this request actually returns a promise and this get request returns and observable i really love when we need to work with promises and observables well the easiest solution for that problem is to simply use from which can be imported from [Music] from rxjs i already know that we also need a little map block so we can also import that from rxjs operators now back to the implementation at the bottom here so we're gonna construct the http request using the capacitor plugin we're gonna supply not that one we're going to supply the method so we're just making a get request and we should perhaps pass in a url there are also more options that you can pass so a url method params data headers and a bit more information then in our case we really just need the url and the method i i don't feel great about the brackets it doesn't look right to me yet but anyway um the problem here is um so we fixed the first problem that this returns a promise by adding from so this is now an observable but the data we get back at this point isn't uh like the data we get here because it's wrapped inside a data property and therefore we can just add a new map uh let's call this result and we map the result to data and then uh the result from our observable call will be can i not format this in any better way no uh the result in that case will be mapped to the right value now instead of making the standard http call we just call our own get request and pass in the url uh in fact the url is this and then we could also uh change this so we pass in the whole url here and we're gonna use the url here and we dynamically append it using the string lateral in here oops that wasn't the right one we want that one come on now we got it uh so now the implementation looks right you could also create that function now for the post request patch update put delete whatever you want and let's give it a try uh actually we should see basically the same result on the web because we're just falling back to the web implementation uh which uses our course proxy we can check this out by going to the network tab and we see that we make call to the api course proxy now let's also check it out on a device all right so here's the application on my device let's quickly hit load facts and we see there's actually a bit going on inside the application but we don't see any javascript call in the background right now within the network tab so it's not a javascript http call anymore it's now a native http call and from the results we also see that we get back the list of results so the same applies to android on android you will see the same behavior because it's now using this block with the native capacitor plug-in uh which maps the http call to the our underlying native functionality and therefore uh doesn't encounter the problem of course so we've covered both cases uh you can use the proxy you can use the native uh capacitor plug-in remind a quick reminder capacitor plug-in is not gonna fix your issue on the browser so in that case we still need a way to handle this differently all right i hope you enjoyed this quick win on solving course issues for your ionic application remember two options first one use a proxy might be a bit slow second option use the capacitor native plug-in won't work if you deploy your site as just a website but great works great for a mobile application if you got any other questions about this of course feel free to leave them below and of course uh the best solution for this would be actually to just solve the course issues on the server side this is really just a solution if you i can't talk to the team who created the api or using a public api that's not implemented course so really it's only for that again check out the ioniq academy give a like subscribe to the channel for more videos and i will catch you next time so happy coding simon [Music] you

Channel: Simon Grimm

Views: 10,638

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial, ionic cors, ionic cors proxy, ionic native http, capacitor native http

Id: C0GSRPeuDAM

Length: 15min 30sec (930 seconds)

Published: Tue Feb 02 2021