angularjs - Angular 2 http header 似乎生成或发送不正确

Question

我正在尝试向使用 HTTP Basic auth 进行身份验证的后端发送请求。 用于测试目的

username: user
password: password

所以正确的标题是:

Authorization: Basic dXNlcjpwYXNzd29yZA==

我已经在 Chrome Advanced Rest Extension 中用这个 header 测试了请求并且它有效:

我在 Angular2 中生成的请求是这样的:

  public getCurrentCounter() {
    console.log("Method getCurrentCounter() in CounterService called");

    var request = this.backendURL + "counter";
    var header = this.generateHeader(this.username, this.password);
    console.log(header);

    return this._http.get(request, {
      headers: header
    })
      .map(res => res.json());
  }

  /**
   * Generate HTTP header using HTTP basic Auth
   */
  private generateHeader(username, password) {

    var base64Creds = btoa(username + ":" + password);
    var auth = 'Basic ' + base64Creds;
    console.log(auth);
    var authHeader = new Headers();
    authHeader.append("Authorization", auth);

    return authHeader;
  }

我记录了生成的 header 对象，它看起来像这样:

我仍然得到这样的回应:

XMLHttpRequest cannot load http://localhost:8080/counter. Response for preflight has invalid HTTP status code 401

有人知道哪里出了问题吗？

Answer 1

问题与服务器端未启用的 CORS 有关。

您的服务必须使用如下 header 回答 OPTIONS 请求:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: [the same ACCESS-CONTROL-REQUEST-HEADERS from request]

这是一个很好的文档:http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

也看看这个:Chrome v37/38 CORS failing (again) with 401 for OPTIONS pre-flight requests

对于 angularjs 1.x 中的基本身份验证，您可以尝试:

service.SetCredentials = function (username, password) {
    var authdata = Base64.encode(username + ':' + password);
    $http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; //you probably don't need this line.  This lets me connect to my server on a different domain
    $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; // jshint ignore:line

        };

对于 Angularjs 2.x 版本，请查看:

Angular2 - set headers for every request

我发现扩展 BaseRequestOptions 非常有趣:

class MyRequestOptions extends BaseRequestOptions {
  constructor () {
    super();
    this.headers.append('Authorization', 'Basic ' + authdata);
  }
} 

希望对你有帮助