I am new to Ionic framework and trying to make simple HTTP request to third party API. On the Android device, with Axios library, I have CORS issues, which I can understand since requests’ Origin are http://localhost
But I tried a lot of different solutions, without success :
I had the very same problem. I ended up making a simple proxy with php, but after a few hours I realized I could have used the native HTTP functionality so I am trying this right now. Thanks for the link.
FYI, for anyone needing to make API calls to a 3rd party API, it is highly recommended to use a proxy especially if you have your own private API key/token to authenticate with the 3rd party API. If you don’t, you’ll be exposing your API key to the world in your mobile app. This is one of the reasons why many 3rd party APIs don’t allow CORS. Most likely having your private API key open to the public is also against the 3rd party API’s Terms of Service.
I would like to report a bug with Discourse, because I clicked on the “heart” icon below @twestrick’s post 40,000 times, but it only shows 1.
In addition to his absolutely critical point about security, you can make a marketing / IP case for a middleware proxy: it allows you to provide added value to your app in the form of functionality that is not easily reverse-engineered and extracted out of the app binary, because it lives in how you repackage the 3rd-party data in your middleware.
Imagine one of those “spiderscraper” sites that facilitates comparison shopping by aggregating information from various sellers. Your algorithms for gathering and packaging the information can be done on the proxy. This also allows you to easily add processing power as needed, using something like Kerberos autoscaling.
TLDR:
the above method works only in native environment (emulator/phone)
On this thing I read somewhere that if you test it in the browser – the CORS protection in browsers is always enabled, unless the remote API “tells” the browser that it is allowed to make a cross-site request. (by responding with a specific request header)
So this basically means you will have the CORS problem in the browser but you will not have the problem when the app is built and on a phone/or probably also in an emulator. I did not test but it makes sense for that to be so.
Disclaimer: I did not try it. That’s how I understand it works. I might be wrong. I resorted to a proxy script and decided to leave it there, because if I want to use the native package it cannot have working requests to the remote environment, so I have to use stubs/demo-data to emulate the app really working and I do not want to do that. I want the app to work as closely to production as possible.