각도 5 (http://localhost)를 사용하고 HttpClient POST 요청을 다른 서버에서 호스팅되는 REST 서비스 (http://192.168.200.75:5555)로 변경합니다.HttpClient POST 중 HttpHeader를 각도 5로 수정할 수 없습니다.
다음과 같은 오류를 가져 오기 : -
http://192.168.200.75:5555/rest/pub/ws/provider/requestToCSAF/로드 할 수 없습니다: 액세스 제어 검사를 통과하지 않는 프리 플라이트 요청에 대한 응답 없음 '액세스 제어가--허용 기원'헤더가 요청 된 자원에 존재합니다. 따라서 원점 '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'));
}
}
처럼 보이지만 따라 없음 '액세스 제어 - - 원산지 허용'헤더는 요청 된 리소스 오류 메시지에 존재 넣지으로 요청 헤더 보인다 : -
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