Question

我正在尝试使用chrome dev console调试我的角度应用程序。我想从angular向本地服务器发送get请求。我尝试过以下方法：

$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无法加载＆＃34; url＆＃34;。 No＆＃39; Access-Control-Allow-Origin＆＃39; 标头出现在请求的资源上。起源＆＃39; null＆＃39;是因此不允许访问。响应的HTTP状态代码为401。

同样的获取请求在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 default / common header等，但一切都失败了。请帮忙。

Answer 1

这是一个CORS问题。

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

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

这就是Postman让你看到响应的原因，因为它没有做chrome所做的事情，也没有做任何检查。

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

如何使这个Angular http get请求（使用基本身份验证）有效？

1 个答案: