Ember.js ember-data restadapter无法加载json [英] Ember.js ember-data restadapter fail to load json

问题描述

干杯！
我有ember数据存储：

  TravelClient.Store = DS.Store.extend（{
修订版本：11，
适配器：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：[
 
]，
 图像：[
 {
id：5110e8b5a8fefe71e0000196，
url：url
} 
} 
  

但是当我尝试返回TravelClient.Tour.find（）它失败with：

  http：// someIP：somePORT / tours 404（未找到）
 
 XMLHttpRequest不能加载http：// someIP：somePORT / tours。来源http：// localhost：3000不允许Access-Control-Allow-Origin。 
  

似乎RESTAdapter不知道，它必须接收JSON或什么？

更新：

在rails服务器端的应用控制器中：

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

但它还是：

 选项http：// someIP：somePORT / tours 404（未找到）
  

似乎RESTAdapter试图加载旅游资源，而不是tours.json：

 请求URL：http：// someIP：somePORT / tours 
  

strong> WORKING SOLUTION

扩展RESTAdapter：

  TravelClient.CUSTOMAdapter = DS.RESTAdapter.extend（{
 bulkCommit：false，
 url：http：// remote_server_address，
 buil dURL：function（record，suffix）{
 var s = this._super（record，suffix）; 
 return s +.json; 
} 
}）
  

并使用正确的标题回复OPTIONS请求

解决方案

RESTAdapter expects JSON 这不是问题，但页面和json不在同一个域上，这是一个安全问题。您可以使用下面列出的两个解决方案之一来解决此问题。

您正在进入同源地政策，您应该使用 JSONP 或 CORS 。最快的修复可能是告诉ember-data你想使用 JSONP 。

对于 CORS 您的服务器需要响应 OPTIONS 请求与标题：

• Access-Control-Allow-Origin li>
  
• 访问控制请求方法

我不是专家，但是你可能需要用gem rack-cors 来查看这里或 ajax来实现钩在 RESTAdapter 中，如下所示：

  App.store = DS.Store.create（{
 revision：11，
 adapter：DS.RESTAdapter.create（{
 namespace：data，
 url： ，
 ajax：function（url，type，hash）{
 hash.url = url; 
 hash.type = t YPE; 
 hash.dataType ='jsonp'; 
 hash.contentType ='application / json;字符集= UTF-8’ ; 
 hash.context = this; 
 
 if（hash.data&& type！=='GET'）{
 hash.data = JSON.stringify（hash.data）; 
} 
 
 jQuery.ajax（hash）; 
}，
}）
}）; 
  

Cheers! I have ember-data store:

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

And router:

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

I recieve this JSON from remote server:

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

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

But when I try to return TravelClient.Tour.find() it fails with:

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.

IT seems like RESTAdapter doesn't know, that it must receive JSON or what?

UPDATE:

In the application controller on the rails server-side:

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

But it's still :

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

And it looks like RESTAdapter tries to load tours resource, not tours.json:

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

WORKING SOLUTION

Extend 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";
  }
})

and respond to an OPTIONS request with right headers

解决方案

The RESTAdapter expects JSON that is not the problem but the page and the json are not on the same domain, this is a security issue. You can resolve this by using one of the two solutions named below.

You're running into the same origin policy you should either use JSONP or CORS. The quickest fix would probably be to tell ember-data that you want to use JSONP.

For CORS your server needs to respond to an OPTIONS request with the headers:

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

i'm no rails expert but you will probably need to do something with the gem rack-cors see here or here.

You could do that by overriding the ajax hook in the RESTAdapter like so:

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);
        },
    })
});

这篇关于Ember.js ember-data restadapter无法加载json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！