如何发送数据（Angular 2）？答案

【问题标题】：How to send data (Angular 2)?如何发送数据（Angular 2）？
【发布时间】：2016-04-20 01:55:17
【问题描述】：

我正在尝试使用 Angular 2 通过 http 请求发送凭据，但 Angular 2 Http get 请求不发送凭据。我做错了什么？

var creds = "username=" + this.username + "&password=" + this.password;
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

http.get('http://localhost:3000', {
    headers: headers,
    credentials: creds
})
.map(res => res.json())
.subscribe(
    data => this.data(data),
    err => this.error(err),
    () => console.log('Done')
);

【问题讨论】：

RequestOptionsArgs 没有凭据属性：angular.io/docs/ts/latest/api/http/…，它是一个Header：angular.io/docs/ts/latest/api/http/Headers-class.html，您可以根据此规范设置标头：fetch.spec.whatwg.org/#headers-class，即凭据属性设置另一回事，我相信您正在寻找 Authorization 标头。

标签： angular typescript xmlhttprequest httprequest

【解决方案1】：

我认为您想使用 HTTP 基本身份验证来访问安全的 HTTP 资源。因此，您的凭据需要在 Authorization 标头中设置，如下所述：

createAuthorizationHeader(headers:Headers) {
  headers.append('Authorization', 'Basic ' +
    btoa('username:password')); 
}

getData() {
  var headers = new Headers();
  this.createAuthorizationHeader(headers);

  this.http.get('http://localhost:3000'', {
    headers: headers
  }).map(res => res.json())
    .subscribe(
      data => this.data(data),
      err => this.error(err),
      () => console.log('Done')
}

您会注意到您的凭据必须是 base64 编码的。

您的请求似乎是跨域请求，因此适用 CORS 概念。您可以查看此链接了解更多详情：http://restlet.com/blog/2015/12/15/understanding-and-using-cors/。也就是说，我认为您的问题与 CORS 无关。

我在RequestOptions 类中看不到任何credentials 属性。

希望对你有帮助蒂埃里

【讨论】：

【解决方案2】：

试试这个代码，它一定可以工作：

var creds = "username=" + this.username + "&password=" + this.password;
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

http.get('http://localhost:3000' + creds, {
 headers: headers,
 })
 .map(res => res.json())
 .subscribe(
 data => this.data(data),
 err => this.error(err),
 () => console.log('Done')

【讨论】：

【解决方案3】：

在您的应用配置中尝试：

  $httpProvider.defaults.withCredentials = true;

所以您的应用配置将如下所示：

angular.module('myappService', [
    'fdvService.constants',
]).config(['$httpProvider',function ($httpProvider) {
      $httpProvider.defaults.withCredentials = true;
  }]);

【讨论】：