add request header on backbone

My server has a manual authorization. I need to put the username/password of my server to my backbone request inorder for it to go through. How may i do this? Any ideas? Thank you

Models in Backbone retrieve, update, and destroy data using the methods fetch, save, and destroy. These methods delegate the actual request portion to Backbone.sync. Under the hood, all Backbone.sync is doing is creating an ajax request using jQuery. In order to incorporate your Basic HTTP authentication you have a couple of options.

fetch, save, and destroy all accept an additional parameter [options]. These [options] are simply a dictionary of jQuery request options that get included into jQuery ajax call that is made. This means you can easily define a simple method which appends the authentication:

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

And include it in each fetch, save, and destroy call you make. Like so:

 fetch({
  beforeSend: sendAuthentication 
 });

This can create quite a bit of repetition. Another option could be to override the Backbone.sync method, copy the original code and just include the beforeSend option into each jQuery ajax request that is made.

Hope this helps!

The easiest way to add request header in Backbone.js is to just pass them over to the fetch method as parameters, e.g.

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

One option might be to use the jQuery ajaxSetup, All Backbone requests will eventually use the underlying jQuery ajax. The benefit of this approach is that you only have to add it one place.

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

Edit 2nd Jan 2018 For complex web applications this may not be the best approach, see comments below. Leaving the answer here for references sake.

You could override Backbone sync method.

#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 )       

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

This code set headers to Backbone ajax, so they will be sent with every Backbone.sync. You will be able to send headers without using xhr.setRequestHeader with every sync call.

So you don't need to do the following every time:

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

You can just do

MyCollection.fetch();

Maybe it's kind of hack but it works perfectly for my system.

My approach to something like this would be overwrite the sync method in order to add the header before doing the request. In the example you could see that I'm creating a Backbone.AuthenticatedModel, which extends from Backbone.Model.

This will impact all methods (GET, POST, DELETE, etc)

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

Then you have to simple extend the model you need to have authentication, from the Backbone.AuthenticatedModel you have created:

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

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

Create a custom sync method that intercepts the calls to Backbone.sync and stuffs your authorization headers in and passes everything else through:

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

Then overwrite your model's sync with that one:

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

Try to use it. We can use either

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

or

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

But I would recomment the first option(beforeSend).

Here is the working code snippet in my case.

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

1. In the client side, add this before any server communication:

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

2. In the server side add these headers (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');