Question

我有一个Angular 5应用程序，我使用简单的GET请求

public getData(url: any): Observable<any> {
    return this.HttpClient.get(url).
        .map((res) => res)
}

当我使用http协议向服务器发送请求时 - 一切正常（在我的chrome浏览器的网络选项卡中，我只看到一个Access-Control-Allow-Origin：https://api.highcharts.com/highmaps/plotOptions.series.dataLabels.allowOverlap），但如果我发送请求https协议到同一台服务器 - 我有错误：

The 'Access-Control-Allow-Origin' header contains multiple values 
'http://127.0.0.1:4200, *', but only one is allowed.

如果打开网络标签 - 我们可以看到两个真正的Access-Control-Allow-Origin：

Access-Control-Allow-Origin: http://127.0.0.1
Access-Control-Allow-Origin: *

我如何只留下一个来源以及为什么当我使用https时它会发生？现在我无法在后端更改CORS :(

从服务器端 - nginx上的GeoServer。

我的nginx CORS配置：

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

Answer 1

在您的网络配置文件中包含此内容。

   <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, X-Your-Extra-Header-Key" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
          </customHeaders>
        </httpProtocol>

请告诉我您编写API功能的语言。

Angular 5 HttpClient Access-Control-Allow-Origin标头多重值

1 个答案: