Angular4 http服务400报错

400报错并不陌生，也就是前后台参数不匹配的原因,知道问题是什么接下来就开始找错误
后台代码接收参数使用的是@RequestParam String username`
@RequestParam接受Content-Type: application/x-www-form-urlencoded
而我们看下前台传数据时使用的Content-Type

咦龟龟 Content-Type哪去了？
赶紧去官网找API，看看有没有配置Headers的
在http的API中发现了RequestOptions这个配置属性我们看下RequestOptions里是什么鬼

class RequestOptions {  constructor(opts: RequestOptionsArgs = {})  method: RequestMethod|string|null  headers: Headers|null  body: any  url: string|null  params: URLSearchParams  get set search(params: URLSearchParams)  withCredentials: boolean|null  responseType: ResponseContentType|null  merge(options?: RequestOptionsArgs): RequestOptions}

终于看到了对我们有用的headers params这两个属性这里就不再往下介绍他们详细的API了，大家可以自行去API里找。
到此就是我解决这个问题的思路，勉勉强强算是解决啦，皆大欢喜~~

下面就附上解决代码

import {URLSearchParams} from '@angular/http';import {Http, Headers, RequestOptions} from '@angular/http';headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });let _data = createPostSearchParams(data);let options = new RequestOptions({ headers: this.headers, search: _data });function createPostSearchParams(searchData){  const data = new URLSearchParams();  for(let key in searchData) {    data.append(key, searchData[key])  }  return data;}this.http.get(url, options).subscribe()

现在就有Content-Type了

关于为什么Angular4为什么会多了这么多的配置项的东西
API里给到了一些提示
This class is based on the RequestInit description in the Fetch Spec.
也就是说Angular应该是基于Fetch的，关于Fetch的API大家自行搜索吧，博主也没有很好的研究过，有机会一起分享下