AngularJS 和基本 HTTP 身份验证答案

【问题标题】：AngularJS and Basic HTTP AuthAngularJS 和基本 HTTP 身份验证
【发布时间】：2015-09-09 15:02:41
【问题描述】：

我有一个 Angular 应用程序正在访问测试数据库。这以前有效，但在周末我不再被允许访问。我没有对 Angular 代码进行任何更改。这就是问题所在。

为了访问测试数据库，我必须输入用户名和密码，因为数据库使用的是基本 HTTP 身份验证。我的资源最终看起来像这样。

angular.module("CoolApp.misc")

.factory('Ad', ad)

ad.$inject = ['$resource'];

function ad($resource) {
  return $resource('http://username:password@build.com/api/advertisement.json');
}

现在当我运行时

Ad.get({}, function(resp) {}, function(badresp) {console.log(badresp)})

控制台吐出 badresp 对象。我查看了我的配置标题部分，并注意到这是 url...

url: "http://username@build.com/api/advertisement.json"

等一下，我将密码设置为网址。为什么标头没有向我提供密码？这就是我在控制台中收到No 'Access-Control-Allow-Origin' header is present on the requested resource. 的原因吗？

这里是我的 http 配置

angular.module("CoolApp")

.config(config);

config.$inject = ["$httpProvider"];

function config($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
  //$httpProvider.defaults.withCredentials = true;
  delete $httpProvider.defaults.headers.common["X-Requested-With"];
  $httpProvider.defaults.headers.common["Accept"] = "application/json";
  $httpProvider.defaults.headers.common["Content-Type"] = "application/json";
}

我的问题是，这有什么问题，我该如何解决？

【问题讨论】：

您是否有权更改 API？另外，只是好奇，您为什么将用户名和密码放在前端的普通视图中？ API是这样构建的吗？可能是值得检查的安全风险（我知道，与问题无关。）

标签： javascript json angularjs basic-authentication ngresource

【解决方案1】：

No 'Access-Control-Allow-Origin' header is present on the requested resource.如果你说你上次接触前端代码后没有改变，那只能意味着服务器上的某些东西改变了……根据你提供的错误，这似乎是一个非常明显的案例，有人要么删除服务器上的Access-Control-Allow-Origin，要么限制来源。

您无法在客户端上更改它；必须在服务器上进行更改。

【讨论】：