Question

我正在使用Nginx为Angular 2客户端提供服务并将rest rest API路由到后端服务器。在Angular开发模式中，我使用常规的“ng服务器”，然后我应该向Nginx添加CORS支持，这种方式只需要将rest API作为外部服务器请求。

我的Nginx conf是：

server {
    listen 80;
    resolver 127.0.0.1 valid=30s;
    root /path/dist-nginx;
    index index.html index.htm;


    location /prometheus/prometheus/ {
      if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        return 204;
      }
      if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
      }
      #proxy_set_header X-Real-IP  $remote_addr;
      #proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host $host;
      proxy_pass http://prometheus:9090/;
    }

    location / {
        try_files $uri $uri/ /index.html;
        #try_files $uri $uri/ /index.html =404;
    }
}

location / prometheus / prometheus是api
位置/服务Angular客户端

它与第一个请求完美配合：

http://localhost:3330/prometheus/prometheus/metrics

显示至少CORS设置运行良好。

但是当客户端执行以下请求时：

http://localhost:3330/prometheus/prometheus/api/v1/query?query=http_request_size_bytes

我在浏览器中遇到了这个问题：

 XMLHttpRequest cannot load
 http://local.appcelerator.io:3330/prometheus/prometheus/api/v1/query?query=http_request_size_bytes.
 The 'Access-Control-Allow-Origin' header contains multiple values '*,
 http://localhost:4200', but only one is allowed.  Origin
 'http://localhost:4200' is therefore not allowed access.

查看我得到的请求的标题答案：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
Access-Control-Allow-Headers:Accept, Authorization, Content-Type, Origin
Access-Control-Allow-Methods:GET, OPTIONS
Access-Control-Allow-Methods:GET, OPTIONS
Access-Control-Allow-Origin:http://localhost:4200
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:Date
Connection:keep-alive
Content-Encoding:gzip
Content-Length:657
Content-Type:application/json
Date:Sun, 11 Jun 2017 05:39:34 GMT
Server:nginx/1.13.1

除了我之外，还增加了3个CORS标题字段：

Access-Control-Allow-Origin:*
Access-Control-Allow-Headers:Accept, Authorization, Content-Type, Origin
Access-Control-Allow-Methods:GET, OPTIONS

Angular客户端直接请求Nginx，中间没有人。

在nginx上直接卷曲这两个请求可以很好地工作。

如果我执行第一个请求：

http://localhost:3330/prometheus/prometheus/metrics

在一个女巫失败后第二次，我没有错误，标题字段没问题。

似乎问题是这个请求的链接，特别是：

http://localhost:3330/prometheus/prometheus/api/v1/query?query=http_request_size_bytes

似乎后端服务器prometheus在回答url / api / v1上的api请求时会添加一些CORS头文件

我怎么能骑他们？

感谢您提供有助于了解当地情况的任何想法。

Answer 1

最后，我可以确认添加的CORS字段来自prometheus后端。

因此，当我请求/ prometheus / prometheus / metrics时，我不会在标题中添加CORS字段，但是当我请求/ prometheus / prometheus / api / v1时，标题中有额外的CORS字段

普罗米修斯并不是一致的行为，为了解决这个问题，我必须创建两个独立的位置，一个用于处理CORS的/ prometheus / prometheus / metrics，另一个用于/ prometheus / prometheus / api / v1。处理CORS

如何来自后端服务器

1 个答案: