Angularjs 否'；访问控制允许原点'；格拉法纳的头球

我正试图在nginx上安装Grafana。下面是我当前的设置。Grafana应该在同一台服务器上与graphite和elastic search进行对话

这是我的nginx配置文件。我不确定这种配置有什么问题：

#graphite server block
server {
 listen                8080 ;
 access_log            /var/log/nginx/graphite.access.log;
 error_log            /var/log/nginx/graphite.error.log;

 location / {

 include uwsgi_params;
 uwsgi_pass 127.0.0.1:3031;
 }
}

#grafana server block
server {
 listen                9400;

 access_log            /var/log/nginx/grafana.access.log;
 error_log            /var/log/nginx/grafana.error.log;

 location / {
auth_basic            "Restricted";
auth_basic_user_file  /etc/nginx/.htpasswd;

    add_header  Access-Control-Allow-Origin 'http://54.123.456.789:9400';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, origin, accept';
    add_header 'Access-Control-Allow-Credentials' 'true';

root /usr/share/grafana;
 }
}

现在，每当我尝试运行Grafana时，它都会给我以下错误：

XMLHttpRequest无法加载http://54.123.456.789:8080/render. 请求的资源上不存在“Access Control Allow Origin”标头。起源'http://54.123.456.789:9400因此，不允许访问。

---

有人能帮我一下吗？提前谢谢

尝试将

访问控制允许-*

的四行放入graphite服务器的配置中。

---

在我看来，grafana要求graphite，而graphite必须允许grafana。

好的，我没有专门设置Graphana，但我打算让CORS使用nginx的

auth_basic

指令，因为每当需要身份验证时，该指令会覆盖您以前拥有的任何头（当服务器返回401时）

所以经过几个小时的研究，我发现了这个要点：它是专门针对Graphana的，可能给出了这个问题的完整答案

但是，出于我的特殊目的，也就是通过

add_header

将

auth_basic

与CORS头文件相结合，我的要点如下：

您的服务器位置应遵循如下结构：

location / {
    proxy_pass <PROXY_PASS_VALUE>;
    
    proxy_set_header    X-Real-IP   $remote_addr;
    proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto  $scheme;

    # Any additional headers and proxy configuration for the upstream...

    # Remove the CORS Origin header if set by the upstream
    proxy_hide_header 'Access-Control-Allow-Origin';

    # Add our own set of CORS headers
    # The origin specifically, when using ith with authentication CANNOT be set to * as per the spec, it must return 1 and only 1 value so to mimic "*"'s behavior we mirror the origin
    add_header Access-Control-Allow-Origin      $http_origin;
    add_header Access-Control-Allow-Methods  
   'GET,POST,PUT,DELETE,OPTIONS';
    add_header Access-Control-Allow-Headers     'Authorization';
    add_header Access-Control-Allow-Credentials 'true';
        
    if ( $request_method = 'OPTIONS' ) {
        # If request method is options we immediately return with 200 OK
        # If we didn't do this then the headers would be overwritten by the auth_basic directive when Browser pre-flight requests are made
        return 200;
    }

    # This should be set AFTER the headers and the OPTIONS methos are taken care of     
    auth_basic            'Restricted';
    auth_basic_user_file  <HTPASSD_FILE_PATH>;
}

位置/{
代用通行证；
代理集头X-Real-IP$remote\u addr；
proxy\u set\u header X-Forwarded-For$proxy\u add\u X\u Forwarded\u For；
代理集头X-Forwarded-Proto$方案；
#上游服务器的任何附加头和代理配置。。。
#移除CORS原点收割台（如果上游设置）
代理_隐藏_标题“访问控制允许原点”；
#添加我们自己的CORS标题集
#具体来说，当使用ith with authentication时，不能根据规范将其设置为*时，它必须返回1且仅返回1个值，以便模仿“*”的行为，从而镜像原点
添加\头访问控制允许来源$http\来源；
添加头访问控制允许方法
'获取、发布、放置、删除、选项'；
添加_头访问控制允许头“授权”；
添加_头访问控制允许凭据“true”；
if（$request_method='OPTIONS'）{
#如果请求方法是选项，我们立即返回200 OK
#如果我们没有这样做，那么当浏览器发出飞行前请求时，标题将被auth_basic指令覆盖
返回200；
}
#这应该在处理标题和选项方法之后设置
授权基本“受限”；
验证基本用户文件；
}

然后，在浏览器环境中使用时，可以发出以下命令：

fetch（
'',
{
方法：“POST”，
正文：，
//必须设置此项才能使基本身份验证与CORS一起工作
凭据：“包括”
}
)
.then（response=>response.json（））
。然后（数据=>{
控制台日志（数据）；
} );