角5(http://localhost)を使用し、別のサーバー(http://192.168.200.75:5555)でホストされているRESTサービスに対してHttpClient POST要求を行う。次のエラーの取得HttpClient POST中にHttpHeaderを角5で変更できない
: -
はhttp://192.168.200.75:5555/rest/pub/ws/provider/requestToCSAF/の読み込みに失敗しました:プリフライトリクエストへの応答は、アクセス制御チェックに合格しない:いいえ「アクセス制御 - 許可 - 起源」ヘッダは、要求されたリソース上に存在します。 Origin 'http://localhost'はアクセスできません。
Serviceクラスは
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