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

http delete

Question

Soy un principiante de 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);

Revisé toda la documentación, y me parece que debería ser correcta.

Cuando uso un archivo local para la URL en $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 en el $http.get anterior (excepto que usa la dirección real, no example.com), entonces 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 en el código entre estos dos es uno; para el primero, el URL es un archivo local y, para el segundo, el URL es un servidor remoto. Si mira el segundo encabezado de Solicitud, no hay encabezado de Autenticación, y el Accept parece estar usando un valor predeterminado en lugar del especificado. Además, la primera línea ahora dice OPTIONS lugar de GET (aunque Access-Control-Request-Method es GET ).

¿Alguna idea de qué es lo que está mal con el código anterior, o cómo incluir los encabezados adicionales utilizando cuando no se utiliza un archivo local como fuente de datos?

Answer 1

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

En las OPCIONES, el cliente está verificando si el servidor permite las solicitudes CORS. Si le proporciona algo diferente a 204, debe configurar su servidor para que envíe los encabezados de Permitir origen correctos.

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

Answer 2

Autenticación básica utilizando 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 GET llamar a método 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
    }
});

Answer 3

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 "preluminadas" primero envían una solicitud HTTP por el método OPCIONES al recurso en el otro dominio, para determinar si la solicitud real es segura de enviar. Las solicitudes entre sitios se preludian de esta manera, ya que pueden tener implicaciones para los datos del usuario. En particular, una solicitud se realiza de antemano si:

Utiliza métodos distintos de GET, HEAD o POST. Además, si se utiliza POST para enviar datos de solicitud con un tipo de contenido distinto de application / x-www-form-urlencoded, multipart / form-data o text / plain, por ejemplo, si la solicitud POST envía una carga XML al servidor usando application / xml o text / xml, entonces la solicitud se realiza de antemano. 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?

Answer 4

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 tu var config

De la documentación de AngularJS $ http :

withCredentials - {boolean} - si se debe establecer el indicador withCredentials en el objeto XHR. Ver solicitudes con credenciales para más información.

Answer 5

Mi sugerencia será agregar una configuración de llamada de función como esta dentro de la función, verificar el encabezado que sea apropiado para ella. Estoy seguro de que definitivamente funcionará. está funcionando 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 de esta manera

    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 6

Para mí, el siguiente fragmento explicativo funcionó. Tal vez no deberías usar '' para el nombre del encabezado?

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

Estoy usando $http.ajax() , aunque no esperaría que sea un cambio de juego.

Answer 7

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

Answer 8

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

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 ves desde el navegador o en el servidor? Pruebe las herramientas del navegador o un proxy de depuración y vea lo que se está enviando.