Добавление пользовательского заголовка в HTTP-запрос с помощью angular.js

Ответ 1

Я взял то, что у вас было, и добавил еще один заголовок X-Testing

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

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

И на вкладке сети Chrome я вижу, что они отправляются.

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

Вы не видите их в браузере или на сервере? Попробуйте использовать инструмент браузера или прокси-сервер отладки и посмотреть, что отправляется.

Ответ 2

Обычная проверка подлинности с использованием метода 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
    }
});

... и вызов метода GET с заголовком:

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

Ответ 3

мое предложение будет добавлять настройки вызова функции, подобные этому внутри функции проверьте заголовок, который подходит для него. Я уверен, что это определенно сработает. он отлично работает для меня.

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

затем вызовите свои данные следующим образом

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

Ответ 4

Если вы хотите добавить свои собственные заголовки во ВСЕХ запросы, вы можете изменить значения по умолчанию на $httpProvider, чтобы всегда добавлять этот заголовок...

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

Ответ 5

То, что вы видите для запроса OPTIONS, прекрасно. Заголовки авторизации не отображаются в нем.

Но для того, чтобы базовый auth работал, вам нужно добавить: withCredentials = true; к вашему var config.

Из документа AngularJS $http:

withCredentials - {boolean} - установить withCredentialsфлаг объекта XHR. Подробнее см. запросы с учетными даннымиинформация.

Ответ 6

А какой ответ с сервера? Он должен ответить 204, а затем действительно отправить запрос GET, который вы запрашиваете.

В OPTIONS клиент проверяет, разрешает ли сервер запрос CORS. Если он дает вам что-то отличное от 204, тогда вы должны настроить сервер для отправки правильных заголовков Allow-Origin.

Способ добавления заголовков - это правильный способ сделать это.

Ответ 7

В Chrome предваряется запрос на поиск заголовков CORS. Если запрос является приемлемым, он отправит реальный запрос. Если вы выполняете этот кросс-домен, вам просто придется иметь дело с ним или найти способ сделать запрос не междоменным. Это по дизайну.

В отличие от простых запросов (см. выше), сначала запрашиваются "предполненные" запросы отправьте HTTP-запрос методом OPTIONS на ресурс на другого домена, чтобы определить, является ли фактический запрос безопасным отправлять. Запросы межсайтовых запросов предваряются таким образом, поскольку они могут имеют последствия для пользовательских данных. В частности, запрос предваряется, если:

Он использует методы, отличные от GET, HEAD или POST. Кроме того, если POST используется для отправлять данные запроса с помощью Content-Type, кроме application/x-www-form-urlencoded, multipart/form-data или text/plain, например если запрос POST отправляет полезную нагрузку XML на сервер, используя application/xml или text/xml, тогда запрос предваряется. Он устанавливает пользовательские заголовки в запросе (например, запрос использует заголовок, такой как X-PINGOTHER)

Ссылка: AJAX в Chrome отправляет ВАРИАНТЫ вместо GET/POST/PUT/DELETE?

Ответ 8

Для меня работал следующий пояснительный фрагмент. Возможно, вы не должны использовать ' для имени заголовка?

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

Я использую $http.ajax(), хотя я бы не ожидал, что это будет смена игры.