Ember.js ember-data restadapterがjsonをロードできない

Question

乾杯！

TravelClient.Store = DS.Store.extend({ 
    revision: 11, 
    adapter: DS.RESTAdapter.create({ bulkCommit: false, url: "http://someIP:somePORT"}) 
}); 

とルータ：

TravelClient.ToursRoute = Ember.Route.extend({ 
    model: function() { 
    return TravelClient.Tour.find(); 
    } 
}); 

私は、リモートサーバーからこのJSON受け取る：

{ 
    "tours": [ 
    { 
     "id": "5110e8b5a8fefe71e0000197", 
     "title": "qui deserunt dolores", 
     "description": "Id velit nihil.", 
     "seats": 12, 
     "options": [ 

     ], 
     "images": [ 
     { 
      "id": "5110e8b5a8fefe71e0000196", 
      "url": "url" 
     } 
} 

をしかし、私はreturn TravelClient.Tour.find()しようとすると、それはで失敗 私は燃えさしデータストアを持っています：

http://someIP:somePORT/tours 404 (Not Found) 

XMLHttpRequest cannot load http://someIP:somePORT/tours. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

それはRESTAdapterがわからない、それはJSONまたは何を受け取る必要がありますか？

UPDATE：レールのサーバー側のアプリケーションコントローラで

：

def set_access_control_headers 
    headers['Access-Control-Allow-Origin'] = '*' 
    headers['Access-Control-Request-Method'] = '*' 
end 

しかし、それはまだです：

OPTIONS http://someIP:somePORT/tours 404 (Not Found) 

そしてRESTAdapterがツアーをロードしようとするように見えますリソース、tours.json：

Request URL:http://someIP:somePORT/tours 

WORKING SOLUTION

RESTAdapter拡張：

TravelClient.CUSTOMAdapter = DS.RESTAdapter.extend({ 
    bulkCommit: false, 
    url: "http://remote_server_address",  
    buildURL: function(record, suffix) { 
    var s = this._super(record, suffix); 
    return s + ".json"; 
    } 
}) 

をしてOPTIONSへの応答

Answer 1

RESTAdapterは問題ではなく、ページとJSONではありませんJSONを期待右のヘッダーと要求同じドメインに存在しない場合、これはセキュリティ上の問題です。これを解決するには、下記の2つのソリューションのいずれかを使用します。

same origin policyに掲載されている場合は、JSONPまたはCORSのいずれかを使用する必要があります。最も速い修正は、おそらくember-dataにJSONPを使用することを伝えることです。サーバーは、ヘッダーとOPTIONS要求に応答する必要があるCORSについては

：

• Access-Control-Allow-Origin
• Access-Control-Request-Method

私はレールの専門家だが、あなたはおそらく何かをする必要があります。宝石とrack-corshereまたはhereを参照してください。あなたはとても似RESTAdapterでajaxフックをオーバーライドしていることを行うことができ

：

App.store = DS.Store.create({ 
    revision: 11, 
    adapter: DS.RESTAdapter.create({ 
     namespace: "data", 
     url: "", 
     ajax: function (url, type, hash) { 
      hash.url = url; 
      hash.type = type; 
      hash.dataType = 'jsonp'; 
      hash.contentType = 'application/json; charset=utf-8'; 
      hash.context = this; 

      if (hash.data && type !== 'GET') { 
       hash.data = JSON.stringify(hash.data); 
      } 

      jQuery.ajax(hash); 
     }, 
    }) 
}); 

Answer 2

私は（それは今のところ私のために働いている。）レールの周りの簡単な仕事を持っているように、それは、乱雑ですコントローラのロジックで簡単に締め付けることができます。 routes.rbで

：単に任意のOPTIONS要求にステータスOKを返し

match ':path' => 'authentications#allow', constraints: {method: 'OPTIONS'} 

。

def allow 
    head :ok 
end 

そしてapplication_controller.rbにすべての要求のためのクロスオリジンリソース共有（CORS）ヘッダを設定します。

before_filter :cors 
def cors 
    response.headers.merge! 'Access-Control-Allow-Origin' => '*', 'Access-Control-Allow-Methods' => 'POST, PUT, GET, DELETE', 'Access-Control-Allow-Headers' => 'Origin, Accept, Content-Type' 
end 

Answer 3

あなたがJSONPを使用することを探しているなら、それは代わりにプライベートajaxOptions機能を無効にするためにはるかに簡単ですjQueryを使用し、ajaxメソッドをオーバーライドします。 Emberのパイプラインには、jQueryの依存関係の削除が含まれます。だからではなく、次の操作を行います。

adapters/application.jsを：

import DS from 'ember-data'; 

export default DS.RESTAdapter.extend({ 
    ajaxOptions: function(url, type, options) { 
     var hash = this._super(url, type, options); 
     hash.dataType = "jsonp"; 
     return hash; 
    } 
}); 

エンバーコアチームは、（代わりにプライベートAPIをハッキングの）正式にこれをサポートするためのパブリックメソッドを公開することができればそれが作成されます。

https://github.com/emberjs/data/blob/1.0.0-beta.15/packages/ember-data/lib/adapters/rest_adapter.js#L915