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

【问题标题】：Can't set an HTTP Basic Auth header in AngularJS无法在 AngularJS 中设置 HTTP 基本身份验证标头
【发布时间】：2013-05-31 05:37:24
【问题描述】：

我编写了以下控制器，用于使用 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) 时，我可以看到标题正在设置。但是，当我在 Firefox 中使用 Chrome 开发人员工具栏或 Firebug 检查请求标头时，我看不到授权标头。

接收请求的服务器没有获得授权标头。

我在这里做错了什么？

【问题讨论】：

您不能使用 JSONP 自定义标头。见stackoverflow.com/questions/3073287/…
谢谢.. 猜猜我应该使用 get 或 post。

标签： javascript angularjs basic-authentication

【解决方案1】：

JJ完美回答。

对于那些浏览的更多信息，如果您只需要传递基本授权标头，您可以简单地在 URL 的开头放置一个用户名和密码。这将发送标头。

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

http://localhost:5000

到：

http://admin:secret@localhost:5000

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

【讨论】：

在浏览器的地址栏中试过这个，但它只给出了一个错误。这可能是 JS 库的一个特性？可能因为缺乏细节以及可能不是最佳实践而投反对票，但这是一个有趣的功能。
感谢您的评论。这是an example，您可以使用使用基本身份验证的 Stripe API 来做到这一点。可能需要的是请求的 URL 需要返回 Basic Auth 标头以及 401 Unauthorized 标头，但我不确定
至少 Chrome 不允许这样做了：chromestatus.com/feature/5669008342777856
谢谢@OliBlogger，我会更新我的答案以包含这个

【解决方案2】：

我相信答案是“是的，对于常规的 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 粘贴到浏览器的地址栏中一样。

【讨论】：