jquery - バックボーンにリクエストヘッダーを追加する

Question

私のサーバーには手動認証があります。サーバーを通過させるには、サーバーのユーザー名/パスワードをバックボーンリクエストに含める必要があります。どうすればこれを行うことができますか？何か案は？ありがとうございました

Answer 1

fetchバックボーンのモデルは、メソッド、、、saveおよびを使用してデータを取得、更新、および破棄しますdestroy。これらのメソッドは、実際の要求部分をBackbone.syncに委任します。内部的には、Backbone.syncjQueryを使用してajaxリクエストを作成するだけです。基本HTTP認証を組み込むために、いくつかのオプションがあります。

fetch、、saveおよびdestroyすべてが追加のパラメータを受け入れます[options]。これら[options]は、行われるjQueryajax呼び出しに含まれるjQueryリクエストオプションの単なる辞書です。これは、認証を追加する簡単なメソッドを簡単に定義できることを意味します。

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、元のコードをコピーして、beforeSend行われる各jQueryajaxリクエストにオプションを含めることです。

お役に立てれば！

Answer 2

Backbone.jsにリクエストヘッダーを追加する最も簡単な方法は、リクエストヘッダーをパラメーターとしてfetchメソッドに渡すことです。

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

Answer 3

1つのオプションは、jQuery ajaxSetupを使用することです。すべてのバックボーンリクエストは、最終的には基盤となるjQueryajaxを使用します。このアプローチの利点は、1か所だけ追加する必要があることです。

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

2018年1月2日編集 複雑なWebアプリケーションの場合、これは最善のアプローチではない可能性があります。以下のコメントを参照してください。参考のためにここに答えを残します。

Answer 4

バックボーン同期メソッドをオーバーライドできます。

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

このコードはヘッダーをBackboneajaxに設定するため、すべての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
},

ただし、最初のオプション（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');
    }
});

Answer 10

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