Angular 4：通过http请求发送自定义标头

Question

Angular 4：通过http请求发送自定义标头

angularhttp-headerscorsangular4-httpclient

3

在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。

- Suvonkar

可能是Angular [4.3] Httpclient不发送标头的重复问题。 - Jota.Toledo

从您的前端请求中删除 headers.append('Access-Control-Allow-Origin', '*'); headers.append('Access-Control-Allow-Headers', '*')。这些仅仅是服务器在响应请求时发送的响应头信息。将它们添加到请求中的唯一影响是触发浏览器自动执行CORS预检OPTIONS请求，然后再从您的代码发送POST请求。有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests。 - sideshowbarker

从devtools网络面板获取的标题列表是预检OPTIONS请求的标题。您添加到请求中的自定义标头不在那里，因为预检的整个目的是首先联系您要发送请求的服务器并询问该服务器是否选择接收包括这些标头的跨源请求。如果服务器配置为允许这些标头，则会发送响应告诉浏览器它是可以的，然后浏览器才会发送POST。但是，如果服务器说不行，预检失败，浏览器就不会尝试POST。 - sideshowbarker

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Suhel · Answer 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()
  })
}