如何使用“内容types”：“application / x-www-form-urlencoded”发布Post请求？

我需要在oAuth2身份validation服务器上发出一个请求。

我可以在邮递员的请求中得到令牌，不能从angular度做出同样的要求4。

我的CORSconfiguration良好，因为其他请求正在运行。

这里是HTTP请求的细节。

POST /oauth/token HTTP/1.1 Host: localhost:8080 Authorization: Basic YXBwbGljYXRpb246c2VjcmV0 Content-Type: application/x-www-form-urlencoded Cache-Control: no-cache Postman-Token: 9f9582e9-fe73-499f-d7f7-82498a974e39 grant_type=password&username=pedroetb&password=password 

在angular4，我试过这种方式

 let headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); headers.append("Authorization","Basic YXBwbGljYXRpb246c2VjcmV0"); var obtainTokenUrl = 'http://localhost:8080/oauth/token'; this._http.post(obtainTokenUrl + "?grant_type=password&username=pedroetb&password=password", null, {headers: headers}).subscribe(response => { console.log(response); }); 

但是这不起作用。

这是邮递员请求标题的屏幕截图：

身体：

那么我怎么能从angular度4做出这个相同的请求呢？

Answer 1

这是我用于检索用户数据的简单代码。 看，标题是作为标题选项给出的。 您可以在文档中查看更多内容

 createUser(user: User): Observable<User> { const submittedUser = JSON.stringify(user); // user is form-submitted data object const headers = new Headers ({ 'Content-Type': 'application/json' }); const options = new RequestOptions({headers: headers}); return this.http.post(baseURL + 'user/create', submittedUser, options) .map((response: Response) => {this.processHttpmsgService.extractData(response);}) .catch(error=> Observable.throw(error)); } 

HeaderOptions的文档

Answer 2

PostRequest（url：string，data：any）{

 var headers = new Headers(); let req = JSON.stringify(data); this.onRequest("request: " + url + "data: " + req); headers.append ("content-Type","application/json"); headers.append("charset","utf-8;"); headers.append("Access-Control-Allow-Origin", "*"); var token = localStorage.getItem('token'); headers.append("Authorization","Bearer "+ token); let options = new RequestOptions({ headers: headers }); console.log(options); // don't have the data yet return new Promise(resolve => { this.http.post(url,req,options) .map(res => res.json()) .subscribe(data => { resolve(data); this.onSuccess(data); } ,error => { this.onError(error); } ); }); 

}

也不要忘记从'@ angular / http'导入导入{Http，Headers，RequestOptions};