Question

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

获得以下错误： -

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

服务类看起来像

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＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源错误消息上： -

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

Answer 1

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

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

1 个答案: