使用 json 的 Ember 应用程序出现错误“XMLHttpRequest 无法加载”

Question

我在 Heroku 上有一个 Rails 应用程序，它通过 API 提供数据。这个数据看起来像......

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

我拉下 Ember Start Kit 并修改它以使用这样的代码从我的 API 中提取数据...

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>

我以为我可以这样启动 chrome...

google-chrome --disable-web-security

让它仅用于测试，但这不起作用。

另外，听起来我需要使用 jsonp 而不是 json？但不确定如何在 ember（或其他任何地方）中实现。任何帮助表示赞赏。谢谢！

更新

在我的 rails 应用程序的过滤器之前添加了 :cors_set_access_control_headers。看起来……

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

...但仍然出现错误

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. 

...如果我发出 curl 来查看标头，我看到 Access Controll 设置为 *...

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 期望以下格式的响应：

{
  people: [
    {
      id: 1,
      name: "John Doe"
    },
    {
      id: 2,
      name: "Jane Doe"
    }
  ]
}

如果他们在不同的域上，您可能还需要enable CORS。