0

だから私はファイルを持っていますindex.html：

<!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>

2 つの 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.jshttp://backbonetutorials.com/の例に従って、Backbone.js アプリケーションを保持し、次のようになります。

/** 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 は {{インスタンス}}/users を読み込めません。Origin null は、Access-Control-Allow-Origin では許可されていません。

{{our instance}}/usersこれは、ブラウザーに移動して Postman 経由でクエリを実行できる場合でも発生します。私の推測では、これはバックボーンにデータを取得させる方法に関係していて、JSON を明示的に要求するのではなく、標準の要求を介してデータを取得しているということです。このエンドポイントでオブジェクトを取得できるようにするためのベスト プラクティスはありますか?

4

1 に答える 1

0

ヘッダーを使用していないcdnjsXMLHttpRequest cannot load {{our instance}}/users. Origin null is not allowed by Access-Control-Allow-Origin.に関連していると確信しています。Access-Control-Allow-Origin: *

これらのファイルを (cdnjs ではなく) 自分で提供してみて、問題が解決するかどうかを確認してください。

于 2013-04-22T11:51:21.767 に答える