Grafana没有'Access-Control-Allow-Origin'标题

时间:2015-02-03 12:18:39

标签: angularjs nginx xmlhttprequest graphite grafana

我试图在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.

有人可以帮帮我吗?提前致谢。

2 个答案:

答案 0 :(得分:0)

尝试将四行Access-Control-Allow-*放入石墨服务器的配置中。 在我看来,格拉法纳正在询问石墨和那些必须允许格拉法纳的石墨。

答案 1 :(得分:0)

好吧,我并没有专门设置Graphana,但我打算让CORS使用nginx的auth_basic指令,因为无论何时需要身份验证,该指令都会覆盖您之前拥有的所有标头(当服务器返回一个基本上是401)

因此,经过数小时的研究,我发现了这个要点:https://gist.github.com/oroce/8742704,它专门针对Graphana,并可能为该问题提供完整的答案。

出于我的特定目的,又是通过auth_basicadd_header与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 );
    } );