Unable to modify HttpHeader during HttpClient POST in Angular 5 - post

Question

Using Angular 5 (http://localhost) and making HttpClient POST request to a REST service hosted on another server (http://192.168.200.75:5555).
Getting following error:-
Failed to load http://192.168.200.75:5555/rest/pub/ws/provider/requestToCSAF/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
Service class looks like
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'));
}
}
But request header looks as follow and throw 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
Referred: https://angular.io/tutorial/toh-pt6

Answer 1

On the REST service side, you should also add the header "Access-Control-Allow-Origin" with the value of the client server(http://localhost), so that the service will allow calls from the client.
you can find more details about cross-site requests here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control