Question

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

Answer 1

Backbone中的模型使用方法fetch，save和destroy检索，更新和销毁数据。这些方法将实际请求部分委托给Backbone.sync。在幕后，所有Backbone.sync正在做的是使用jQuery创建一个ajax请求。为了整合您的基本HTTP身份验证，您有几个选择。

fetch，save和destroy都接受其他参数[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))));
}

并将其包含在您发出的每个fetch，save和destroy来电中。像这样：

 fetch({
  beforeSend: sendAuthentication 
 });

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

希望这有帮助！

Answer 2

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

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

Answer 3

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

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

编辑2018年1月2日 对于复杂的Web应用程序，这可能不是最佳方法，请参阅下面的注释。为了参考，请留下答案。

Answer 4

您可以覆盖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 )

Answer 5

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

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

因此，您不需要每次都执行以下操作：

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

你可以做到

MyCollection.fetch();

也许它是一种黑客行为，但它对我的系统来说非常有效。

Answer 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',

});

Answer 7

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

Answer 8

创建一个自定义同步方法，该方法拦截对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
    });

Answer 9

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

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

或

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

但是我建议第一个选项（发送前）。

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

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

Answer 10

在客户端，在任何服务器通信之前添加：

$.ajaxSetup({
    xhrFields: {
        withCredentials: true
    },
    async: true
});

在服务器端添加这些标头（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');

在骨干网上添加请求标头

10 个答案: