Skip to content

Instantly share code, notes, and snippets.

@foxnewsnetwork
Created May 4, 2015 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save foxnewsnetwork/d4c1dbbbbf1e1f40e2e7 to your computer and use it in GitHub Desktop.
Save foxnewsnetwork/d4c1dbbbbf1e1f40e2e7 to your computer and use it in GitHub Desktop.
Ember js cross domain adapter configuration

The problem

Using a heavy front-end framework like EmberJS and separate api services from joints like imgur, twitter, tumblr, github, etc., makes it possible to host a rich-feature website statically... but the horrid obstacle of the browser's Access-Control header (CORS) stands in your way:

XMLHttpRequest cannot load http://api.service.co/freedb. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://foxnewsnetwork.github.io' is therefore not allowed access. 

The Why

Renting a cloud server (especially from Amazon) to host your website where you're uncertain of its daily traffic can be both expensive and unstable. As an application developer, you ideally want to build an app that is run exclusively on the client's machines, so you can avoid all server problems. As a loser programmer living in his mom's basement trying to make his way in the web world myself, being able to setup my production build once and never do devOps is something of a holy grail dream (second only to landing a real job, scoring a 3d girlfriend, and moving out).

How?

Step 1: Find a service provider who will host your static files for free and who ship headers that contain the following:

Access-Control-Allow-Origin: *

Github pages is a good candidate.

Step 2: Sign up for whatever data-persistence services you'll need. Because you'll be using so many different vendors for your data persistence, consider using:

https://github.com/foxnewsnetwork/ember-data-complex

to better organize your data models.

Step 3: If you're going to use $.ajax in your adapter (which you will), you'll need to configure Ember Data's adapter to properly handle cross domain requests:

# adapters/application
ApplicationAdapter = DS.RESTAdapter.extend
  ajaxOptions: ->
    hash = @_super arguments...
    hash.crossDomain = true
    hash.dataType = "jsonp"
    hash

During development, consider using:

https://github.com/diploidgenomics/ember-cli-cors

to kill control access on your local machine.

Step 4: (this is the ... lolprofit step) build your application and deploy. Then forget about it! Without renting your own cloud server, you are free from the concern of devops (until you scale up... but let's face it, 99.999% of the shit you build won't be scaling anywhere except down)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment