使用 angular.js 向 HTTP 请求添加自定义标头

IT技术 javascript angularjs http-headers
2021-03-05 06:16:57

我是 angular.js 的新手，我正在尝试向请求添加一些标头：

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

我已经查看了所有文档，在我看来这应该是正确的。

当我为 中的 URL 使用本地文件时$http.get，我在 Chrome 的网络选项卡上看到以下 HTTP 请求：

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

如您所见，两个标题都已正确添加。但是当我将 URL 更改为$http.get上面显示的 URL 时（除了使用真实地址，而不是 example.com），然后我得到：

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

这两者之间代码的唯一区别是第一个 URL 是本地文件，第二个 URL 是远程服务器。如果您查看第二个请求标头，则没有 Authentication 标头，并且Accept似乎使用的是默认标头而不是指定的标头。此外，第一行现在说OPTIONS而不是GET（虽然Access-Control-Request-Method是GET）。

知道上面的代码有什么问题，或者在不使用本地文件作为数据源时如何获取包含的附加标头吗？

6个回答

我拿走了你所拥有的，并添加了另一个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

您没有从浏览器或服务器上看到它们吗？尝试浏览器工具或调试代理并查看发送的内容。

我在问题中添加了更多信息。看起来标题是在一种情况下添加的，而不是另一种情况。
2021-04-16 06:16:57
抱歉，我在您的答案中添加了一个编辑，该编辑旨在用于我的原始问题。
2021-05-01 06:16:57
我的意思是开发人员工具的网络选项卡，而不是资源 - 更新答案
2021-05-08 06:16:57
我无权访问服务器，在浏览器上我使用的是 Firefox，但我看到了我添加到上面原始问题中的标题。我看不到您可以在 Chrome 中的资源选项卡上查看标题的位置。
2021-05-14 06:16:57

使用 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
    }
});
最好的答案。
2021-04-28 06:16:57

如果您想将自定义标头添加到所有请求，您可以更改 $httpProvider 的默认值以始终添加此标头...

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common = { 
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose'
      };
}]);
ALL but OPTIONS 请求是
2021-04-17 06:16:57
很好的例子。这可以用于缓存用于重定向页面的令牌吗？
2021-05-09 06:16:57

我的建议是在函数中添加一个像这样的函数调用设置，检查适合它的标题。我相信它一定会奏效。它非常适合我。

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

您看到的 OPTIONS 请求很好。授权标头未在其中公开。

但是为了使基本身份验证工作，您需要添加：withCredentials = true;到您的var config.

来自 AngularJS $http 文档：

withCredentials - {boolean}- 是否withCredentials 在 XHR 对象上设置标志。有关更多信息，请参阅带有凭据的请求。

其它你可能感兴趣的问题
上一篇innerHTML 是异步的吗？ 下一篇对数组进行排序，以便空值始终排在最后