Angular2 / HTTP（POST）头 [英] Angular2/Http (POST) headers

问题描述

我无法做POST请求时改变标题。我试了几件事情：

简单类：

 出口类HttpService的{
    构造函数（HTTP：HTTP）{
        this._http = HTTP;
    }
}
 

我试过：

  TESTCALL（）{
    让身体= JSON.stringify（
        {用户名：测试，密码：ABC123}
    ）    让标题=新的报头（）;
    headers.append（'内容类型，应用/ JSON'）; //也尝试其他类型的测试，如果与其他类型的工作，但没有运气    this._http.post（的http：//mybackend.local/api/auth'，身体，{
        标题：标题
    }）
    。订阅（
        数据=＆GT; {的console.log（数据）; }，
        ERR =＆GT; {执行console.log（ERR）; }，
        {} =＆GT; {的console.log（'完成'）; }
    ）;
}
 

2

  TESTCALL（）{
    让身体= JSON.stringify（
        {用户名：测试，密码：ABC123}
    ）    让标题=新的报头（）;
    headers.append（'内容类型，应用/ JSON'）; //也尝试其他类型的测试，如果与其他类型的工作，但没有运气    让选项=新RequestOptions（{
        标题：标题
    }）;    this._http.post（的http：//mybackend.local/api/auth'，身体，期权）
    。订阅（
        数据=＆GT; {的console.log（数据）; }，
        ERR =＆GT; {执行console.log（ERR）; }，
        {} =＆GT; {的console.log（'完成'）; }
    ）;
}
 

没有任何两个是工作。我没有忘记导入任何类的。

我使用谷歌浏览器。所以，我检查网络选项卡上，我的要求是存在的，它说我的Content-Type是text / plain的。

这是一个错误还是我做错了什么？

的更新的
我忘了来导入Angular2 / HTTP的头类：

 进口{}标题从angular2 / HTTP';
 

解决方案

我认为你正在使用的HTTP支持Angular2的正确方法。看到这个工作plunkr： https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=preVIEW 。

也许，你忘了导入标题类。我前一段时间犯了这个错误，并有在JavaScript控制台中没有错误，但我试图设置实际上并不设置的标头。例如关于内容类型头我有文本/纯而不是应用程序/ JSON 。你可以在我的进口提供给您通过评论标题的plunkr重现此...

下面是一个完整的工作示例（包括进口）：

 进口{}组件从angular2 /核心;
从angular2 / HTTP'进口{HTTP，头};
进口'rxjs /接收';@零件（{
  选择：我的应用，
  模板：`
    ＆LT; D​​IV（点击）=executeHttp（）＆GT;
      执行HTTP
    ＆LT; / DIV＆GT;
  `
}）
出口类AppComponent {
  构造函数（私人HTTP：HTTP）{  }  createAuthorizationHeader（标题：标题）{
    headers.append（'授权'，'基本'+
      BTOA（'a20e6aca-ee83-44bc-8033-b41f3078c2b6：c199f9c8-0548-4be79655-7ef7d7bf9d20'））;
  }  executeHttp（）{
    VAR标题=新的报头（）;
    this.createAuthorizationHeader（头）;
    headers.append（'内容类型，应用/ JSON'）;    VAR内容= JSON.stringify（{
      名称：'我的名字'
    }）;    返回this.http.post（
      https://angular2.apispark.net/v1/companies/，内容{
        标题：标题
      }）地图（RES =＆GT; res.json（））认购（。
        数据=＆GT; {的console.log（数据）; }，
        ERR =＆GT; {执行console.log（ERR）; }
      ）;
  }
}
 

希望它可以帮助你，
蒂埃里

I'm unable to change the headers when doing a POST request. I tried a couple of things:

Simple class:

export class HttpService {
    constructor(http: Http) {
        this._http = http;
    }
}

I tried:

testCall() {
    let body = JSON.stringify(
        { "username": "test", "password": "abc123" }
    )

    let headers = new Headers();
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck

    this._http.post('http://mybackend.local/api/auth', body, { 
        headers: headers 
    })
    .subscribe(
        data => { console.log(data); },
        err => { console.log(err); },
        {} => { console.log('complete'); }
    );
}

2:

testCall() {
    let body = JSON.stringify(
        { "username": "test", "password": "abc123" }
    )

    let headers = new Headers();
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck

    let options = new RequestOptions({
        headers: headers
    });

    this._http.post('http://mybackend.local/api/auth', body, options)
    .subscribe(
        data => { console.log(data); },
        err => { console.log(err); },
        {} => { console.log('complete'); }
    );
}

none of the two are working. I didn't forget to import any of the classes.

I'm using Google Chrome. So I check the 'Network' tab, my request is there, and it says my Content-Type is text/plain.

Is this a bug or am I doing something wrong?

UPDATE I forgot to import the Headers class from Angular2/http:

import {Headers} from 'angular2/http';

解决方案

I think you're using the HTTP support of Angular2 the right way. See this working plunkr: https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=preview.

Perhaps, you forgot to import the Headers class. I made this mistake some time ago and there was no error in the JavaScript console but the headers I tried to set weren't actually set. For example regarding the Content-Type header I had text/plain instead of application/json. You can reproduce this in the plunkr I provided to you by commenting Headers in the imports...

Here is a complete working sample (imports included):

import {Component} from 'angular2/core';
import {Http,Headers} from 'angular2/http';
import 'rxjs/Rx';

@Component({
  selector: 'my-app', 
  template: `
    <div (click)="executeHttp()">
      Execute HTTP
    </div>
  `
})
export class AppComponent {
  constructor(private http:Http) {

  }

  createAuthorizationHeader(headers:Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('a20e6aca-ee83-44bc-8033-b41f3078c2b6:c199f9c8-0548-4be79655-7ef7d7bf9d20')); 
  }

  executeHttp() {
    var headers = new Headers();
    this.createAuthorizationHeader(headers);
    headers.append('Content-Type', 'application/json');

    var content = JSON.stringify({
      name: 'my name'
    });

    return this.http.post(
      'https://angular2.apispark.net/v1/companies/', content, {
        headers: headers
      }).map(res => res.json()).subscribe(
        data => { console.log(data); },
        err => { console.log(err); }
      );
  }
}

Hope it helps you, Thierry

这篇关于Angular2 / HTTP（POST）头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！