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',身体,{
标题:标题
})
。订阅(
数据=> {的console.log(数据); },
ERR => {执行console.log(ERR); },
{} => {的console.log('完成'); }
);
}
2
TESTCALL(){
让身体= JSON.stringify(
{用户名:测试,密码:ABC123}
) 让标题=新的报头();
headers.append('内容类型,应用/ JSON'); //也尝试其他类型的测试,如果与其他类型的工作,但没有运气 让选项=新RequestOptions({
标题:标题
}); this._http.post(的http://mybackend.local/api/auth',身体,期权)
。订阅(
数据=> {的console.log(数据); },
ERR => {执行console.log(ERR); },
{} => {的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 /接收';@零件({
选择:我的应用,
模板:`
< DIV(点击)=executeHttp()>
执行HTTP
< / DIV>
`
})
出口类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 => res.json())认购(。
数据=> {的console.log(数据); },
ERR => {执行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屋!