backbone.js：如何顯式請求瓶頸端點的JSON？

所以我有一個文件，index.html：backbone.js：如何顯式請求瓶頸端點的JSON？

<!doctype html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<head> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Example</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="/assets/css/main.css"> 
</head> 

<body> 
<div class="container" id="content"> 
    <h1>User Manager</h1> 
    <hr/> 
    <div class="page"></div> 
</div> 



<!-- Third-Party Libraries --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> 

<!-- Application core --> 
<script src="./src/common.js"></script> 
<script src="./src/application.js"></script> 

<!-- Modules --> 
</body> 
</html>

引用兩個JavaScript文件，common.js和application.js.

common.js只是持有的通用功能，併爲現在的樣子：

$.fn.serializeObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
};

application.js持有Backbone.js的應用和如下所示，在下列的http://backbonetutorials.com/例如：

/** PREFILTER - points to our instance **/ 

$.ajaxPrefilter(function(options, originalOptions, jqXHR) { 
    options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url; 
}); 

/** COLLECTIONS **/ 

var Users = Backbone.Collection.extend({ 
    url: '/users' 
}); 

/** ROUTES **/ 

var Router = Backbone.Router.extend({ 
    routes: { 
     '': 'home' 
    } 
}) 


/** VIEWS **/ 

var userList = Backbone.View.extend({ 

    el: '.page', 
    render: function() { 
     var users = new Users(); 
     users.fetch({ 
      success: function() { 
       this.$el.html("CONTENT HERE"); 
      } 
     }) 

    } 

}); 


/** INSTANCES **/ 

/* VIEWS */ 
var userList = new userList(); 

/* ROUTES */ 
var router = new Router() 

router.on('route:home', function() { 
    userList.render(); 
}) 

/** START HISTORY **/ 
Backbone.history.start();

我可以使用Chrome開發人員工具來判斷這是否適用於網站提供的示例頁面 - 它會拉取json對象並對其進行預覽。

然而，當我切換前置串過我自己的Heroku的情況下，我在控制檯中執行以下操作：

的XMLHttpRequest無法加載{{我們實例}} /用戶。 Access-Control-Allow-Origin允許原始空值不爲。

即使我可以在瀏覽器中使用{{our instance}}/users並通過郵遞員查詢，也會發生這種情況。我的猜測是，這與我使用Backbone檢索數據的方式有關，它通過標準請求拉取數據，而不是明確要求使用JSON。這裏是否有最佳做法，以便我可以抓取此端點上的對象？

來源

2013-04-04 fox

正在從同一個地方提供一切還是你的'$ .ajaxPrefilter'那裏的AJAX請求發送到不同比其他所有東西都來自哪裏？「原始null不被Access-Control-Allow-Origin允許」的一小部分內容會導致您遇到許多SO問題，這些問題可能與您面臨的同一問題有關。 – 2013-04-04 05:57:29

一切都由同一個heroku實例提供，而預過濾器就是爲了簡單起見。以您建議的方式搜索，導致我得出結論，這個問題與我通過Backbone請求數據的方式有關。 – fox 2013-04-04 06:02:53

我很確定XMLHttpRequest cannot load {{our instance}}/users. Origin null is not allowed by Access-Control-Allow-Origin.與cdnjs沒有使用Access-Control-Allow-Origin: *標題。

儘量滿足那些文件你自己（而不是cdnjs），看看是否能解決您的問題

來源

2013-04-22 11:51:21

backbone.js：如何顯式請求瓶頸端點的JSON？

回答

相關問題