在骨干网上添加请求标头

问题描述 投票:50回答:10

我的服务器有手动授权。我需要将我的服务器的用户名/密码放入我的骨干请求,以便它通过。我怎么能这样做?有任何想法吗?谢谢

jquery backbone.js
10个回答
54
投票

Backbone中的模型使用fetchsavedestroy方法检索,更新和销毁数据。这些方法将实际请求部分委托给Backbone.sync。在引擎盖下,所有Backbone.sync正在做的是使用jQuery创建一个ajax请求。为了合并您的Basic HTTP身份验证,您有几个选择。

fetchsavedestroy都接受额外的参数[options]。这些[options]只是一个jQuery请求选项的字典,它被包含在jQuery ajax调用中。这意味着您可以轻松定义一个附加身份验证的简单方法:

sendAuthentication = function (xhr) {
  var user = "myusername";// your actual username
  var pass = "mypassword";// your actual password
  var token = user.concat(":", pass);
  xhr.setRequestHeader('Authorization', ("Basic ".concat(btoa(token))));
}

并将其包含在每个fetchsavedestroy中。像这样:

 fetch({
  beforeSend: sendAuthentication 
 });

这可以创造相当多的重复。另一种选择可能是覆盖Backbone.sync方法,复制原始代码,只需将beforeSend选项包含在每个jQuery ajax请求中。

希望这可以帮助!


-1
投票
  1. 在客户端,在任何服务器通信之前添加: $.ajaxSetup({ xhrFields: { withCredentials: true }, async: true });
  2. 在服务器端添加这些头文件(PHP): header('Access-Control-Allow-Origin: http://your-client-app-domain'); header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With"); header('Access-Control-Allow-Credentials: true');

43
投票

在Backbone.js中添加请求标头的最简单方法是将它们作为参数传递给fetch方法,例如

MyCollection.fetch( { headers: {'Authorization' :'Basic USERNAME:PASSWORD'} } );

29
投票

一个选项可能是使用jQuery ajaxSetup,所有Backbone请求最终将使用底层的jQuery ajax。这种方法的好处是你只需要将它添加到一个地方。

$.ajaxSetup({
    headers: { 'Authorization' :'Basic USERNAME:PASSWORD' }
});

编辑2018年1月2日对于复杂的Web应用程序,这可能不是最好的方法,请参阅下面的评论。在此留下答案以供参考。


18
投票

您可以覆盖Backbone同步方法。

#coffeescript
_sync = Backbone.sync
Backbone.sync = (method, model, options) ->
    options.beforeSend = (xhr) ->
        xhr.setRequestHeader('X-Auth-Token_or_other_header' , your_hash_key)
        #make sure your server accepts X-Auth-Token_or_other_header!!
    #calling the original sync function so we only overriding what we need
    _sync.call( this, method, model, options )       

11
投票
Backbone.$.ajaxSetup({
    headers: {'Authorization' :'Basic USERNAME:PASSWORD'}
});

此代码将标头设置为Backbone ajax,因此它们将与每个Backbone.sync一起发送。每次同步调用时,您都可以在不使用xhr.setRequestHeader的情况下发送标头。

所以你不需要每次都做以下事情:

MyCollection.fetch({ headers: {'Authorization' :'Basic USERNAME:PASSWORD'} } );

你可以这样做

MyCollection.fetch();

也许这是一种黑客攻击,但它对我的系统来说非常有效。


6
投票

我对此类方法的处理方法是覆盖sync方法,以便在执行请求之前添加标头。在这个例子中你可以看到我正在创建一个Backbone.AuthenticatedModel,它从Backbone.Model扩展而来。

这将影响所有方法(GET,POST,DELETE等)

Backbone.AuthenticatedModel = Backbone.Model.extend({
    sync: function(method, collection, options){
        options = options || {};
        options.beforeSend = function (xhr) {
            var user = "myusername";// your actual username
            var pass = "mypassword";// your actual password
            var token = user.concat(":", pass);
            xhr.setRequestHeader('Authorization', ("Basic ".concat(btoa(token))));
        };
        return Backbone.Model.prototype.sync.apply(this, arguments);
    }

});

然后,您必须从您创建的Backbone.AuthenticatedModel中简单地扩展您需要进行身份验证的模型:

var Process = Backbone.AuthenticatedModel.extend({
    url: '/api/process',

});

4
投票
Object.save(
  {'used': true}
  {headers: {'Access-Token': 'access_token'}}
)

2
投票

创建一个自定义同步方法,拦截对Backbone.sync的调用并填充您的授权标头,并通过以下方式传递其他所有内容:

    REPORTING_API_KEY = 'secretKeyHere';
    CustomSync = function(method, model, options) {
        options.headers = {
            'Authorization' : 'Bearer ' + REPORTING_API_KEY
        };
        return Backbone.sync(method, model, options);
    };

然后用那个覆盖模型的同步:

    MyModel = Backbone.Model.extend({
        urlRoot: '/api/',
        sync: CustomSync
    });

1
投票

尝试使用它。我们也可以使用

beforeSend: function(xhr) {
    xhr.setRequestHeader('X-CSRFToken', csrf_token);
},

要么

headers: {
    "X-CSRFToken": csrf_token
},

但我会推荐第一个选项(beforeSend)。

这是我案例中的工作代码段。

var csrf_token = this.getCSRFToken();
self.collection.fetch(
{
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-CSRFToken', csrf_token);
    },
    // headers: {
    //     "X-CSRFToken": csrf_token
    // },
    data: {
        "mark_as": "read"
    },
    type: 'POST',
    success: function () {
        if (clickLink) {
            window.location.href = clickLink;
        } else {
            self.unreadNotificationsClicked(e);
            // fetch the latest notification count
            self.counter_icon_view.refresh();
        }
    },
    error: function(){
        alert('erorr');
    }
});
© www.soinside.com 2019 - 2024. All rights reserved.