File this one under ‘lessons learned from hours spent chasing my tail’.
Recently, I’ve been working quite a bit with the Ionic Framework… While I can’t say that I was initially on board for the whole ‘hybrid app’ approach for mobile development, I’ve really grown to love the stack and find it fun to work in. Fun development aside, this isn’t to say that the stack (like any stack) is without its issues – for me currently, it’s the undocumented (or the only-documented-in-a-github-issue) gotchas that can create the largest headaches, as they can often result in an hour or two of tail-chasing.
As you’ve likely gathered from this post’s title, the most recent fun on this front was trying to chase down a CORS issue when testing a tablet application that I am currently writing. In this application, we’ve opted for custom auth headers – adding which caused the CORS issues to rear their ugly head… In my case, it was specifically issues with Access-Control-Allow-Headers.
“No big deal – Cordova/Phonegap whitelists all domains, so you’re good to go”, right? As is often the case, “no big deal” can be filed under the category of “famous last words” here…
Not previously known to me, apparently using -l(/livereload) causes a modification to the config.xml at runtime for that build – a modification that removes the ‘*’ whitelisting, which can result in banging your head against CORS issues when interfacing with a REST service during development using livereload…
For the skinny, check out the github issue discussing this – https://github.com/driftyco/ionic-cli/issues/89
Unfortunately, Googling for “Ionic CORS” will provide you with a lot of noise that can result in some tail chasing as you start following suggestions to delete client side default headers or researching server-side solutions to mask the problem… Googling for “livereload CORS” however will take you to some relevant information via Grunt livereload Server discussions.
In the end, it was just easiest to configure my development web server to allow the CORS operations, as I wanted to keep Live Reload capabilities with the least amount of fuss. There are some client side things that you can do (discussed in the linked thread), but as you will find, those are temporary and will need to be done over and over as you develop… I’ve also read some mention of configuring a Grunt proxy server to proxy these requests ‘locally’, but I’ve not been able to investigate that approach, so I can’t really speak to it, though I’d love to get some input on this approach if any readers have any…
Anywhos… I just wanted to put this out there in case “Ionic CORS” led anyone else on a wild goose chase.
Happy Developing!
-Matt