如何使这个 Angular http 获取请求（使用基本身份验证）工作？答案

【问题标题】：How to make this Angular http get request (with basic authentication) work?如何使这个 Angular http 获取请求（使用基本身份验证）工作？
【发布时间】：2017-05-18 00:22:53
【问题描述】：

我正在尝试使用 chrome 开发控制台调试我的 Angular 应用程序。我想从 Angular 向本地服务器发送一个获取请求。我尝试了以下方法：

$http = angular.element($0).injector().get('$http');
$base64 = angular.element($0).injector().get('$base64');

var auth = $base64.encode("user:passwd");
var authHeaders = {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"};

$http.get("url",{headers:authHeaders,method:"GET"})

阅读此答案后： https://stackoverflow.com/a/30296149/1496826

我认为自定义标题是问题所在。因此，我尝试将授权标头放在正文中：

$http.get("url",{data: {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"},method:"GET"})

但我仍然遇到同样的错误：

XMLHttpRequest 无法加载“url”。没有“访问控制允许来源” 请求的资源上存在标头。原点“空”是因此不允许访问。响应的 HTTP 状态代码为 401。

同样的 get 请求在 Postman 中运行良好：

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "url",
  "method": "GET",
  "headers": {
    "authorization": "Basic bWdhcasdasd",
    "cache-control": "no-cache",
    "postman-token": "XXXXXX-XXXXXX-xXXXX-xXXXX"
  }
}

我尝试了其他几种变体，例如 - $http 默认/通用标头等，但一切都失败了。请帮忙。

【问题讨论】：

你有没有尝试过一个简单的不经过身份验证的请求，看看它是否有效？比如：$http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { }, function errorCallback(response) { });

标签： angularjs http http-headers google-chrome-devtools angular-http

【解决方案1】：

这是一个CORS 问题。

CORS 标头必须在服务器端处理，我在这里看不到您的服务器端代码，但为了让此错误消失，您必须指定允许哪个域请求资源。

该异常是由拦截服务器响应的浏览器引起的，请检查标头，如果它没有找到 Allow-Control-Allow-Origin 标头，它将不会将响应转发到您的代码（这仅适用于跨源请求）。

这就是 Postman 让你看到响应的原因，因为它不像 chrome 那样做，不做任何检查。

正如我所说，正确的解决方案是修复您的服务器端代码并指定 Allow-Control-Allow-Origin header ，或者一个快速但临时的解决方法是为 chrome 安装 this 插件，该插件将拦截服务器响应并添加 Allow-Control-Allow-Origin到*（表示任何域）这个技巧会欺骗chrome并让你看到响应。

【讨论】：

我无权访问服务器端代码。它是由其他人维护的 django 应用程序。插件解决方案不可行，因为我不能要求每个用户都安装它。请提出一些可以从客户端实现的替代方案
不幸的是，没有解决方案。您必须与服务器端 manteiner 取得联系，并要求他在标头中为您的域添加通配符。如果你在网上寻找 cors 相关的问题，你会发现这个话题经常遇到，但解决方法是在响应中设置正确的 header，这只是在服务器端完成。