Ionic – CORS with Live Reload Part 2

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:

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.

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:

{
 "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"
    }
  ]
}

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

Ionic – CORS with Live Reload

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

Tab Dump – September 5th 2014 Ed.

Well, it’s that time again – too many tabs to be able to look myself in the face (in the mirror, of course)… If you’re a ‘regular’ reader of this ‘blog’, you know by now that these are pretty much the only posts that I do with any real regularity… Fluff of little value, I know – but here you have it… what I’ve been holding in my tabs for the past couple of weeks…

A visual proof that neural nets can compute any function
This apple ID has not purchased OS X Mavericks
Spider’Woman’s Big Ass is a Big Deal
Dockerizing a Node.js web application
Puppet Labs
10 of the Creepiest Unmarked Locations & Encounters in Fallout 3
A Javascript Quality Guide
Sandstorm
Hacker News – Turn Node Applications in Executables
Mailvelope
Microsoft Research – Drawbridge
Wiki – Artificial Neural Network
Productivity and the Workweek
A failed Experiment: How LG Screwed Up Its WebOS Acquisition
About Ruffner Mountain
Red Mountain Park
YMCA Memberships
RabbitMQ
Das Haus Birmingham! – Oktoberfest Schedule
It’s time to discover the “Neglected Master” of Science Fiction
Haskell Wiki – Functional Programming
F# – Getting Started
Hacker News