Ajouter un en-tête personnalisé à la requête HTTP en utilisant angular.js

j'ai pris ce que vous aviez, 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 Chrome, je les vois 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

ne les voyez-vous pas depuis le navigateur, ou sur le serveur? Essayez l'outillage du navigateur ou un proxy de débogage et voyez ce qui est envoyé.

authentification de Base à l'aide de 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 obtenir appel de méthode 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
    }
});

ma suggestion sera d'ajouter une fonction de paramètres d'appel comme ceci l'intérieur de la fonction vérifier l'en-tête qui est approprié. Je suis sûr qu'il sera certainement le travail. il est parfaitement travailler 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 || {}
    };
}

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

si vous voulez ajouter vos en-têtes personnalisés à toutes les requêtes, Vous pouvez changer les valeurs par défaut sur $httpProvider pour toujours ajouter cet en-tête...

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

ce que vous voyez pour la demande D'OPTIONS est très bien. Autorisation en-têtes ne sont pas exposées.

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

From the AngularJS $http documentation :

withCredentials - {boolean} - savoir s'il faut mettre le withCredentials drapeau sur l'objet XHR. Voir demandes avec justificatifs pour plus information.

Et quelle est la réponse du serveur? Il devrait répondre a 204 et ensuite vraiment envoyer le GET que vous demandez.

dans les OPTIONS, le client vérifie si le serveur autorise les requêtes CORS. Si cela vous donne quelque chose de différent d'un 204, alors vous devez configurer votre serveur pour envoyer les en-têtes permit-Origin corrects.

la façon dont vous ajoutez des en-têtes est la bonne façon de le faire.

Chrome est en prélude à la demande de rechercher des en-têtes CORS. Si la demande est acceptable, il enverra alors la demande réelle. Si vous faites ce cross-domain, vous devrez simplement le traiter ou trouver un moyen de rendre la requête non-cross-domain. C'est par la conception.

Contrairement aux requêtes simples (discutées ci-dessus), les requêtes" préflighted " sont les premières envoyer une requête HTTP par la méthode OPTIONS à la ressource dans un autre domaine, afin de déterminer si la demande est sûr envoyer. Les demandes croisées sont Préfi - ont des répercussions sur les données des utilisateurs. En particulier, une demande est

il utilise des méthodes autres que GET, HEAD ou POST. Aussi, si POST est utilisé pour envoyer des données de demande avec un type de contenu autre que application/x-www-form-urlencoded, multipart/form-data, ou text/plain, par exemple, si la requête POST envoie une charge XML au serveur en utilisant application / xml ou texte / xml, puis la requête est pré-éclairée. Il définit des en-têtes personnalisés dans la requête (par exemple la requête utilise un en-tête tel que X-PINGOTHER)

Ref: AJAX dans Chrome options d'envoi au lieu de GET/POST/PUT/DELETE?

pour moi, l'extrait explicatif suivant a fonctionné. Peut-être ne devriez-vous pas utiliser ' pour le nom d'en-tête?

{
   headers: { 
      Authorization: "Basic " + getAuthDigest(), 
      Accept: "text/plain" 
   }
}

j'utilise $http.ajax() , mais je ne m'attendrais pas à ce que cela change le jeu.