无法在AngularJS中设置HTTP基本身份验证标头

Question

我为了测试使用Angular JS的HTTP Basic Auth编写了以下控制器。

function TestCtrl($scope, $http, Base64){
    $http.defaults.headers.common.Authorization = 'Basic ' + Base64.encode('admin:secret');
    $http.jsonp( 'http://localhost:5000/test'+'/?callback=JSON_CALLBACK', {query:{isArray:true }}).
    then(function (response) {
         $scope.test = response.data;
     });
}

当我使用console.log($http.defaults.headers)时，我可以看到设置了头文件。但是当我在Chrome Developer工具栏或Firefox的Firebug中检查请求头时，我没有看到Authorization头。

接收请求的服务器没有收到Authorization头。

我在这里做错了什么？

- Manu

---

您无法使用JSONP自定义标头。请参见https://dev59.com/EHA75IYBdhLWcg3w186G - Laurent Perrin

谢谢。我想我应该使用GET或POST。 - Manu

Answer 1

我认为答案是“是的，对于常规的AJAX请求，您应该能够设置适当的身份验证标头”。

但是，当您使用JSONP（基于示例）时，您不会进行标准的XHR调用，这改变了答案为“否”。

如果您被困在使用JSONP上，我认为您无法发送任何身份验证标头。例如，JSONP与Angular的$http.get不起作用。

有关详细信息，请参见http://schock.net/articles/2013/02/05/how-jsonp-really-works-examples/，但简短的版本是JSONP放置一个<script>标签来获取一些数据。返回的数据调用您提供的函数（例如您的示例中的JSON_CALLBACK）并包含服务器提供的数据。因此，您无法更改标头--该请求正是HTTP GET请求，就像将脚本标记的URL粘贴到浏览器的位置栏中一样。

- JJ Geewax

Answer 2

JJ回答得非常好。

对于那些浏览网页的人，如果你只需要传递基本授权头信息，你可以将用户名和密码放在URL的开头。这样就会发送头信息。

例如，使用 localhost 作为 URL，admin:secret 作为用户名:密码，改变：

http://localhost:5000

to:

http://admin:secret@localhost:5000

注意: @OliBlogger指出，最新版本的Chrome不再支持此功能。请查看他的评论以获取实际的Chrome状态更新链接。

- Conner H

---

在浏览器地址栏中尝试过，但只会出现错误。这可能是JS库的一个特性？也许踩踏的原因是缺乏具体细节以及可能不是最佳实践，但了解这个有趣的功能还是很有意义的。 - user1944491

感谢您的评论。这里有一个使用Stripe API（使用基本身份验证）的示例，如下图所示：http://i.imgur.com/l0os1pJ.png。可能需要的是请求的URL需要返回基本身份验证头以及401未经授权的头，但我不确定。 - Conner H

至少Chrome不再允许这样做了：https://www.chromestatus.com/feature/5669008342777856 - OliCoder

谢谢@OliBlogger，我会更新我的答案以包含这个。 - Conner H