Angular 4：发送带有 http 请求的自定义标头答案

【问题标题】：Angular 4 : Send custom headers with http requestsAngular 4：发送带有 http 请求的自定义标头
【发布时间】：2018-02-09 04:51:21
【问题描述】：

在 Angular 4 中，我无法使用 http 请求发送自定义标头。

我尝试使用以下代码发送标头：

let response = this.http.post(environment.serverUrl + url, data, this.getHeaders())
      .map((response: Response) => response.json())
      .catch(this.handleError);

private getHeaders(): RequestOptions {
    let reqOp = new RequestOptions();

    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Access-Control-Allow-Headers', '*');

    reqOp.headers = headers;

    return reqOp;
  }

标题仍然没有附加到我的请求标题中。如果我在 Chrome 的“网络”中检查调用，则无法看到自定义标头。

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:access-control-allow-headers,access-control-allow-origin,content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:10.xxx.xxx.xxx:3300
Origin:http://localhost:4200
Referer:http://localhost:4200/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

任何帮助解决这个问题？请注意，我没有使用来自 '@angular/common/http' 的 HttpClient；

【问题讨论】：

Angular [4.3] Httpclient doesn't send header的可能重复
从您的前端请求中删除headers.append('Access-Control-Allow-Origin', '*'); headers.append('Access-Control-Allow-Headers', '*')。这些严格来说只是 response 标头，供服务器响应请求而发回。将它们添加到请求中的唯一效果是触发浏览器在从您的代码发送 POST 请求之前自动执行 CORS 预检 OPTIONS 请求。详情请见developer.mozilla.org/en-US/docs/Web/HTTP/…。
您从 devtools Network 窗格获得的标头列表是预检 OPTIONS 请求的标头。您添加到请求中的自定义标头不存在，因为预检的全部目的是首先联系您尝试将请求发送到的服务器并询问该服务器是否选择获取包含这些的跨域请求标题。如果服务器配置为允许这些标头，它会发送一个响应告诉浏览器它没问题，然后浏览器才会发送 POST。但是如果服务器说不正常，则预检失败并且浏览器永远不会尝试 POST

标签： angular http-headers cors angular4-httpclient

【解决方案1】：

这样做。如果想要更多标题，只需将其添加到标题数组中即可。

apiUrl = 'api/url'
myFunction(data) {
  let headers = new Headers({'Content-Type':'application/json'});
  let options = new RequestOptions({headers: headers});

  return this.http.post(this.apiUrl, JSON.stringify(data), options).map((response: Response) => {
    return response.json()
  })
}

【讨论】：

还是没有运气。 Chrome 自定义标头中的一项观察是在“Access-Control-Request-Headers : access-control-allow-origin,content-type”中添加
尝试从 chrome 扩展安装“Allow-control-Allow-Origin:*”。你也已经在你的服务器中配置了 CORS 吗？