Agregar un encabezado personalizado a la solicitud HTTP usando angular.js

Soy un novato en angular.js y estoy tratando de agregar algunos encabezados a una solicitud:

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

He mirado toda la documentación y me parece que debería ser correcta.

Cuando utilizo un archivo local para la URL en el $http.get, veo la siguiente solicitud HTTP en la pestaña de red en 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

Como puede ver, ambos encabezados se agregaron correctamente. Pero cuando cambio la URL a la que se muestra $http.getarriba (excepto usando la dirección real, no example.com), obtengo:

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 única diferencia de código entre estos dos es que, para el primero, la URL es un archivo local y, para el segundo, la URL es un servidor remoto. Si observa el segundo encabezado de Solicitud, no hay un encabezado de Autenticación y Acceptparece estar usando un encabezado predeterminado en lugar del especificado. Además, la primera línea ahora dice en OPTIONSlugar de GET(aunque Access-Control-Request-Methodes GET).

¿Alguna idea de lo que está mal con el código anterior, o cómo obtener los encabezados adicionales incluidos cuando no se usa un archivo local como fuente de datos?

Tomé lo que tenías y agregué otro X-Testingencabezado

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

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

Y en la pestaña de red de Chrome, veo que se envían.

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

¿No los ve desde el navegador o en el servidor? Pruebe las herramientas del navegador o un proxy de depuración y vea lo que se envía.

Autenticación básica mediante el método 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
    }
});

... y llamada al método GET con encabezado:

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

Si desea agregar sus encabezados personalizados a TODAS las solicitudes, puede cambiar los valores predeterminados en $ httpProvider para agregar siempre este encabezado ...

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

Mi sugerencia será agregar una configuración de llamada de función como esta dentro de la función, verifique el encabezado que sea apropiado para ella. Estoy seguro de que definitivamente funcionará. funciona perfectamente para mí.

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

luego llama a tus datos así

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

Lo que ves para la solicitud de OPCIONES está bien. Los encabezados de autorización no están expuestos en él.

Pero para que la autenticación básica funcione, debe agregar: withCredentials = true;a su var config.

De la documentación de AngularJS $ http :

withCredentials - {boolean}- si se debe establecer la withCredentials bandera en el objeto XHR. Consulte las solicitudes con credenciales para obtener más información.

¿Y cuál es la respuesta del servidor? Debería responder un 204 y luego enviar realmente el GET que está solicitando.

En las OPCIONES, el cliente está comprobando si el servidor permite solicitudes CORS. Si te da algo diferente a 204, entonces debes configurar tu servidor para enviar los encabezados de Allow-Origin correctos.

La forma en que agrega encabezados es la forma correcta de hacerlo.

Chrome está realizando una verificación previa de la solicitud para buscar encabezados CORS. Si la solicitud es aceptable, enviará la solicitud real. Si está haciendo este dominio cruzado, simplemente tendrá que lidiar con él o, de lo contrario, encontrará una manera de hacer que la solicitud no sea de dominio cruzado. Esto es por diseño.

A diferencia de las solicitudes simples (discutidas anteriormente), las solicitudes de "verificación previa" envían primero una solicitud HTTP mediante el método OPTIONS al recurso en el otro dominio, para determinar si la solicitud real es segura de enviar. Las solicitudes entre sitios se revisan previamente de esta manera, ya que pueden tener implicaciones en los datos del usuario. En particular, una solicitud tiene una verificación previa si:

Utiliza métodos distintos a GET, HEAD o POST. Además, si se usa POST para enviar datos de solicitud con un tipo de contenido que no sea application / x-www-form-urlencoded, multipart / form-data o text / plain, por ejemplo, si la solicitud POST envía una carga útil XML al servidor usando application / xml o text / xml, la solicitud tiene una verificación previa. Establece encabezados personalizados en la solicitud (por ejemplo, la solicitud utiliza un encabezado como X-PINGOTHER)

Ref: AJAX en Chrome enviando OPCIONES en lugar de GET / POST / PUT / DELETE?

Para mí, el siguiente fragmento explicativo funcionó. ¿Quizás no debería usar 'para el nombre del encabezado?

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

Estoy usando $http.ajax(), aunque no esperaría que eso cambiara las reglas del juego.