Javascript 使用AngularJS拦截器防止HTTP基本身份验证对话框

我正在构建一个带有RESTful API的AngularJS（1.2.16）web应用程序，我想对身份验证信息无效或不存在的请求发送401个未经授权的响应。当我这样做时，即使存在HTTP拦截器，当通过AngularJS发出AJAX请求时，我也会看到浏览器显示的基本“需要身份验证”对话框。我的拦截器在该对话框之后运行，现在做一些有用的事情已经太迟了

一个具体的例子：

我的后端API为

/API/things

返回401，除非存在授权令牌。又好又简单

在AngularJS应用程序端，我已经查看了，并在

config

块中设置了一个拦截器：

$httpProvider.interceptors.push(['$q', function ($q) {
  return {
    'responseError': function (rejection) {
      if (rejection.status === 401) {
        console.log('Got a 401')
      }
      return $q.reject(rejection)
    }
  }
}])

当我加载我的应用程序，删除身份验证令牌，并对

/api/things

执行AJAX调用（希望触发上述拦截器）时，我看到了以下情况：

如果我取消该对话框，我会看到我希望看到的“Got a 401”的

console.log

输出，而不是该对话框：

很明显，拦截器正在工作，但已经太迟了

我在网上看到很多关于在这种情况下使用AngularJS进行身份验证的帖子，它们似乎都使用HTTP拦截器，但没有一个提到弹出的基本身份验证对话框。我对其外观的一些错误想法包括：

• 响应上缺少

  内容类型：application/json

  头？不，在那儿
• 除了拒绝承诺之外，还需要退货吗？无论返回什么，该代码总是在对话框之后运行

我是否错过了一些设置步骤或是使用了拦截器不正确？

找到了答案

---

诀窍是发送一个

WWW-Authenticate

响应头，其值不是

Basic

。然后，您可以使用基本的

$http

拦截器或更聪明的拦截器捕获401，以备将来参考

我在尝试处理

401

错误时提出了这个解决方案。 我没有将

Basic

重写为

x-Basic

或任何类似的选项，因此我决定在客户端使用Angular来处理它

在启动注销时，首先尝试向假用户发出错误请求，以丢弃当前缓存的凭据

我让这个函数处理请求（它使用jquery的

$.ajax

和禁用的异步调用）：

因此，当我尝试注销用户时，会发生以下情况：

//This will send a request with a non-existant user.
//The purpose is to overwrite the cached data with something else
accountServices.authenticateUser('logout','logout');

//Since setting headers.common.Authorization = '' will still send some
//kind of auth data, I've redefined the headers.common object to get
//rid of the Authorization property
$http.defaults.headers.common = {Accept: "application/json, text/plain, */*"};

---

我和Spring引导安全性（HTTP basic）一起遇到了这个问题，从Angular 1.3开始，您必须设置

$httpProvider.defaults.headers.common[“X-request-with”]=“XMLHttpRequest”使弹出窗口不出现。
请详细说明一下好吗？“像AngularHTTP auth这样更聪明的东西”要求服务器发送200响应。我正在寻找一个服务器返回401代码的解决方案。我认为只有在“授权”时才会弹出：“基本XXX”请发布一些代码示例，我也有同样的问题。IOS基本身份验证请求从未完成是否有任何示例可以使用此角度http身份验证并截获修改请求头的响应？为什么不使用403而不是401？我使用401，因为在原始问题中，我删除了身份验证令牌（在我的情况下，是cookie）。401是此处使用的正确响应代码，因为请求需要身份验证，但未提供任何身份验证。403用于提供身份验证但服务器拒绝访问资源的情况。它不适用于Angular 1.5和firefox 48.x的我的应用程序。。。即使使用X-request-with-header，也会触发基本的身份验证提示…对我来说也是如此。我已将此header添加到postman中。但它不起作用。这解决了我的问题。浏览器身份验证模式在应用您的问题后被隐藏。谢谢。虽然我创建了一个拦截器，并且仅当请求URL是针对我的RESTAPI时才添加了这个头，但是这个想法对我来说很有用。
//This will send a request with a non-existant user.
//The purpose is to overwrite the cached data with something else
accountServices.authenticateUser('logout','logout');

//Since setting headers.common.Authorization = '' will still send some
//kind of auth data, I've redefined the headers.common object to get
//rid of the Authorization property
$http.defaults.headers.common = {Accept: "application/json, text/plain, */*"};