Grafana 没有“Access-Control-Allow-Origin”标头答案

【问题标题】：No 'Access-Control-Allow-Origin' header for GrafanaGrafana 没有“Access-Control-Allow-Origin”标头
【发布时间】：2015-04-02 15:20:38
【问题描述】：

我正在尝试在 nginx 之上设置 Grafana。这是我当前的设置。 Grafana 应该在同一台服务器上与石墨和弹性搜索进行对话。

这是我的 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 cannot load http://54.123.456.789:8080/render. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://54.123.456.789:9400' is therefore not allowed access.

有人可以帮我解决这个问题吗？提前致谢。

【问题讨论】：

标签： angularjs nginx xmlhttprequest graphite grafana

【解决方案1】：

尝试将Access-Control-Allow-*这四行放在graphite server的配置中。在我看来，grafana 是在询问石墨，而石墨必须允许 Grafana。

【讨论】：

【解决方案2】：

好的，我并没有专门设置 Graphana，但我打算使用 CORS 与来自 nginx 的 auth_basic 指令一起使用，因为这样的指令会覆盖您之前在需要身份验证时拥有的任何标头（当服务器基本上返回 401 时） )

因此，经过几个小时的研究，我发现了这个 Gist：https://gist.github.com/oroce/8742704，它专门针对 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>;
}

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

fetch( 
    '<URL>',
    {
        method: 'POST',
        body: <YOUR_BODY_OBJECT>,
        // This must be set for BASIC Auth to work with CORS
        credentials: 'include'
    }
)
    .then( response => response.json() )
    .then( data => {
        console.log( data );
    } );

【讨论】：