在 Angular 5 中的 HttpClient POST 期间无法修改 HttpHeader答案

【问题标题】：Unable to modify HttpHeader during HttpClient POST in Angular 5在 Angular 5 中的 HttpClient POST 期间无法修改 HttpHeader
【发布时间】：2017-12-21 20:17:19
【问题描述】：

使用 Angular 5 (http://localhost) 并向托管在另一台服务器 (http://192.168.200.75:5555) 上的 REST 服务发出 HttpClient POST 请求。

出现以下错误：-

无法加载http://192.168.200.75:5555/rest/pub/ws/provider/requestToCSAF/：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost' 因此不允许访问。

服务类的样子

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Observable';
import {RequestJSON} from './requestJSON';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Access-
    Control-Allow-Origin': '*' })
};

@Injectable()
export class MyService {

 private serviceUrl 
    = 'http://192.168.200.75:5555/rest/pub/ws/provider/requestToCSAF/';

 constructor(private httpClient: HttpClient) {
  }

   postRequest(json: RequestJSON): Observable<RequestJSON> {

const _options = {headers: new HttpHeaders({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'}) };

return this.httpClient.post(this.serviceUrl, json, httpOptions)
  .catch((error: any) => Observable.throw(error.json().error || 'Server error'));

 }
}

但请求标头如下所示并抛出 No 'Access-Control-Allow-Origin' header is present on the requested resource error message:-

OPTIONS rest/pub/ws/provider/requestToCSAF/ HTTP/1.1
Host: 192.168.200.75:5555
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin,content-type
Accept: */*
DNT: 1
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9

推荐人：https://angular.io/tutorial/toh-pt6

【问题讨论】：

标签： post http-headers cross-domain angular5

【解决方案1】：

在 REST 服务端，您还应该使用客户端服务器的值（http://localhost）添加标头“Access-Control-Allow-Origin”，以便服务将允许来自客户端的调用。您可以在此处找到有关跨站点请求的更多详细信息： https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control

【讨论】：