Ember app that consumes json getting error "XMLHttpRequest cannot load" - ruby-on-rails

Question

I have a rails app on heroku that is serving up data via an API. This data looks like...
[{"created_at":"2014-02-20T17:22:02Z","id":1,"name":"Joe Rogan","twitter":"#joerogan","updated_at":"2014-02-20T17:22:02Z"},{"created_at":"2014-02-20T17:22:11Z","id":2,"name":"Kristen Schaa","twitter":"#kchalithis","updated_at":"2014-02-20T17:22:11Z"},{"created_at":"2014-02-20T17:29:10Z","id":3,"name":"Casey Grim","twitter":"#aCoupleofN3rds","updated_at":"2014-02-20T17:29:16Z"}]
I pulled down the Ember Start Kit and have modified it to pull data from my API with code like this...
js/app.js
App.Person.adapter = Ember.RESTAdapter.create();
App.Person.url = "http://myapp.herokuapp.com/api/v1/shots?api_key=12d2d06fb2f6a786ac75b32625cf83a1";
App.Person.collectionKey = "people";
index.html
<script type="text/x-handlebars" id="index">
<ul>
{{#each item in model}}
<li>{{item.name}}</li>
{{/each}}
</ul>
</script>
I thought I could start chrome like this...
google-chrome --disable-web-security
And get it working just for testing, but that does not work.
Also, Sounds like I need to use jsonp rather than json? But not sure how to implement in ember (or really anywhere else). Any help appreciated. Thanx!
Update
Added :cors_set_access_control_headers before filter in my rails app. looks like...
module Api
module V1
class ShotsController < ApplicationController
before_filter :cors_set_access_control_headers
...
def cors_set_access_control_headers
headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
end
...but still getting error
XMLHttpRequest cannot /api/v1/shots?api_key=d26da3938adc5f3c8604256194c18501.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
...if I issue a curl to look at headers I'm seeing Access Controll set to *...
me#me-E6530:~$ curl -v http://myapp.herokuapp.com/api/v1/shots?api_key=12d2d06fb2f6a786ac75b32625cf83a1
* About to connect() to myapp.herokuapp.com port 80 (#0)
* Trying 54.243.169.60... connected
> GET /api/v1/shots?api_key=12d2d06fb2f6a786ac75b32625cf83a1 HTTP/1.1
> User-Agent: curl/7.22.0 (i686-pc-linux-gnu) libcurl/7.22.0 OpenSSL/1.0.1 zlib/1.2.3.4 libidn/1.23 librtmp/2.3
> Host: myapp.herokuapp.com
> Accept: */*
>
< HTTP/1.1 200 OK
< Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
< Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
< Access-Control-Allow-Origin: *
< Access-Control-Request-Method: *

Answer 1

Ember expects response in the following format:
{
people: [
{
id: 1,
name: "John Doe"
},
{
id: 2,
name: "Jane Doe"
}
]
}
Also you may need to enable CORS if they are on different domains.