Hello again, reader.
I wanted to follow up (better late than never, right?!) on my previous post regarding CORS issues encountered while working with the Ionic Framework’s –livereload feature.
If you’re reading this, then you likely already know that some interesting things can happen when using the Live Reload (–livereload / -l) features of Ionic… Namely:
[code]
XMLHttpRequest cannot load http://someresource.com/api/?id=1.
No ‘Access-Control-Allow-Origin’ header is present
on the requested resource. Origin ‘http://192.168.1.123:8100’
is therefore not allowed access.
[/code]
As you may very well be aware, generally speaking, resources external to a Ionic/Corodova project are whitelisted in the project’s config.xml via an ‘access’ element possessing an origin property having a value of ‘*’. This is so that you can consume external resources, such as an API.
As a result of how Live Reload currently works, this origin policy has to be updated while using –livereload – where it’s changed to the URL of your live reload server (generally an http://local_ip:port variety) when you kick off the “ionic run -lcs android’ (or whatever) command.
Due to the changes of the project and perhaps due to the way the livereload does the magic that it does (I admittedly have a high level understanding of this system, as I’ve not had time to dig in too deeply), many users have ran up against CORS issues when developing/debugging using –livereload.
While I’d previously read on proxy configuration in Ionic, it hadn’t quite clicked in relation to this issue until a helpful github user spelled it out using crayon fonts for me. Here is the response that I am referring to: https://github.com/driftyco/ionic-cli/issues/89#issuecomment-86034156
Essentially, as Yonn-Trimoreau has spelled out, you can configure a proxy in your ionic.project file that will proxy your external resource requests ‘locally’, effectively eliminating CORS issues while working with –livereload…
Here is an example of this configuration (ionic.project file) for 2 proxies:
[javascript]
{
"name": "MyProject",
"app_id": "",
"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
],
"proxies": [
{
"path" : "/remoteAPI",
"proxyUrl": "http://reddit.com/api"
},
{
"path" : "/localAPI",
"proxyUrl": "http://192.168.1.123/redditishResponseLocalAPI"
}
]
}
[/javascript]
As you’ve likely inferred, after adding the proxy configuration to your project, you will be enabled to call external resources as if they are local – “/remoteAPI” and “/localAPI” in the case of this example.
Quite useful when developing against multiple APIs or when using Live Reload in general.
-Matt