Ajout d'un en-tête personnalisé à une requête HTTP à l'aide d'angular.js

Question

Je suis novice en angular.js et j'essaie d'ajouter des en-têtes à une requête :

   var config = {headers: {
            'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
            'Accept': 'application/json;odata=verbose'
        }
    };

   $http.get('https://www.example.com/ApplicationData.svc/Malls(1)/Retailers', config).success(successCallback).error(errorCallback);

J'ai regardé toute la documentation, et il me semble que cela devrait être correct.

Lorsque j'utilise un fichier local pour l'URL dans le champ $http.get Je vois la requête HTTP suivante sur l'onglet réseau dans Chrome :

GET /app/data/offers.json HTTP/1.1
Host: www.example.com
Connection: keep-alive
Cache-Control: max-age=0
If-None-Match: "0f0abc9026855b5938797878a03e6889"
Authorization: Basic Y2hhZHN0b25lbWFuOkNoYW5nZV9tZQ==
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
If-Modified-Since: Sun, 24 Mar 2013 15:58:55 GMT
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
X-Testing: Testing
Referer: http://www.example.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

Comme vous pouvez le voir, les deux en-têtes ont été ajoutés correctement. Mais lorsque je change l'URL pour celle qui figure dans l'en-tête $http.get ci-dessus (sauf que j'utilise l'adresse réelle, pas exemple.com), puis j'obtiens :

OPTIONS /ApplicationData.svc/Malls(1) HTTP/1.1
Host: www.datahost.net
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://mpon.site44.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Access-Control-Request-Headers: accept, origin, x-requested-with, authorization, x-testing
Accept: */*
Referer: http://mpon.site44.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

La seule différence de code entre ces deux-là est que pour la première, l'URL est un fichier local, et pour la seconde, l'URL est un serveur distant. Si vous regardez le deuxième en-tête de demande, il n'y a pas d'en-tête d'authentification, et l'en-tête Accept semble utiliser une valeur par défaut au lieu de celle spécifiée. En outre, la première ligne indique maintenant OPTIONS au lieu de GET (bien que Access-Control-Request-Method es GET ).

Une idée de ce qui ne va pas avec le code ci-dessus, ou comment obtenir les en-têtes supplémentaires inclus en utilisant quand on n'utilise pas un fichier local comme source de données ?

Answer 1

J'ai pris ce que tu avais, et j'ai ajouté un autre X-Testing en-tête

var config = {headers:  {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose',
        "X-Testing" : "testing"
    }
};

$http.get("/test", config);

Et dans l'onglet réseau de Chrome, je vois qu'ils sont envoyés.

GET /test HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Authorization: Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==
X-Testing: testing
Referer: http://localhost:3000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

Vous ne les voyez pas dans le navigateur, ou sur le serveur ? Essayez l'outil de navigation ou un proxy de débogage et voyez ce qui est envoyé.

Answer 2

Authentification de base en utilisant la méthode HTTP POST :

$http({
    method: 'POST',
    url: '/API/authenticate',
    data: 'username=' + username + '&password=' + password + '&email=' + email,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});

...et appel de la méthode GET avec en-tête :

$http({
    method: 'GET',
    url: '/books',
    headers: {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json',
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});

Answer 3

Si vous souhaitez ajouter vos en-têtes personnalisés à TOUTES les requêtes, vous pouvez modifier les valeurs par défaut de $httpProvider afin de toujours ajouter cet en-tête

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common = { 
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose'
      };
}]);

Answer 4

Ma suggestion sera d'ajouter une fonction d'appel de paramètres comme ceci à l'intérieur de la fonction, vérifiez l'en-tête qui lui est approprié. Je suis sûr que cela va fonctionner. Cela fonctionne parfaitement pour moi.

function getSettings(requestData) {
    return {
        url: requestData.url,
        dataType: requestData.dataType || "json",
        data: requestData.data || {},
        headers: requestData.headers || {
            "accept": "application/json; charset=utf-8",
            'Authorization': 'Bearer ' + requestData.token
        },
        async: requestData.async || "false",
        cache: requestData.cache || "false",
        success: requestData.success || {},
        error: requestData.error || {},
        complete: requestData.complete || {},
        fail: requestData.fail || {}
    };
}

puis appelez vos données comme ceci

    var requestData = {
        url: 'API end point',
        data: Your Request Data,
        token: Your Token
    };

    var settings = getSettings(requestData);
    settings.method = "POST"; //("Your request type")
    return $http(settings);

Answer 5

Ce que vous voyez pour la demande OPTIONS est bien. Les en-têtes d'autorisation n'y sont pas exposés.

Mais pour que l'authentification de base fonctionne, vous devez ajouter : withCredentials = true; à votre var config .

Depuis l'AngularJS Documentation $http :

avecCredentials - {boolean} - s'il faut définir le withCredentials sur l'objet XHR. Voir les demandes avec des informations d'identification f informations.