unable to configure grafana with graphite

Question

I am using Nginx to serve both graphite and grafana (they are all running on the same server - not my desktop). I am able to access graphite via Nginx. However, grafana cannot

Answer 1

I think you need to enable CORS in nginx configuration for graphite.Take a look at : http://enable-cors.org/server_nginx.html . Here's the configuration I made using this link:

(In my case, grafana is exposed on port 8100, and graphite on port 8090; adapt accordingly (8100 -> 85 , 8090 -> 8080) ).

upstream django {
    # Distribute requests to servers based on client IP. This keeps load
    # balancing fair but consistent per-client. In this instance we're
    # only using one uWGSI worker anyway.
    ip_hash;
    server unix:/tmp/uwsgi.sock;
}

server {
   listen      yourServerIp:8090;
   server_name yourServerName.com;
   access_log      /var/log/nginx/graphite_access.log;
   error_log       /var/log/nginx/graphite_error.log;
   charset     utf-8;


   # Django admin media.
   location /media/admin/ {
      alias /usr/lib/python2.7/dist-packages/django/contrib/admin/media/;
   }

   # Static media.
   location /content/ {
      alias /opt/graphite/webapp/content/;
   }

   # Send all non-media requests to the Django server.
   location / {

    # CORS (for grafana)

    if ($http_origin ~* "^http://yourServerName.com:8100$") {
     set $cors "true";
    }

    if ($request_method = 'OPTIONS') {
     set $cors "${cors}options";  
    }

    if ($request_method = 'GET') {
     set $cors "${cors}get";  
    }

    if ($request_method = 'POST') {
     set $cors "${cors}post";
    }

    if ($cors = "trueoptions") {
     add_header 'Access-Control-Allow-Origin' "$http_origin";
     add_header 'Access-Control-Allow-Credentials' 'true';
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
     add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     add_header 'Access-Control-Max-Age' 1728000;
     add_header 'Content-Type' 'text/plain charset=UTF-8';
     add_header 'Content-Length' 0;

     return 204;
    }

    if ($cors = "truepost") {
     add_header 'Access-Control-Allow-Origin' "$http_origin";
     add_header 'Access-Control-Allow-Credentials' 'true';
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
     add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

    if ($cors = "trueget") {
     add_header 'Access-Control-Allow-Origin' "$http_origin";
     add_header 'Access-Control-Allow-Credentials' 'true';
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
     add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

     uwsgi_pass  django;
     include     uwsgi_params;
   }
}

Note that the interesting part for you is what's below # CORS , the django stuff might be useless for you.

To ensure it's a CORS issue, you want to inspect HTTP headers sent by your browser; if there's a Origin header, it means you have to use CORS.

Answer 2

Try to run browser whith "disable-web-security" flag.

Answer 3

I was able to solve this problem by changing the requests to GET instead of POST. See this issue for more information. https://github.com/grafana/grafana/issues/345

My data sources ended up looking like

datasources: {
  graphite: {
    type: 'graphite',
    url: window.location.protocol+"//"+window.location.hostname+":"+window.location.port+"/_graphite",
    default: true,
    render_method: 'GET'  
  },
},

I still haven't figured out how to get my graphite install to accept POST requests. Even when querying directly so I can be sure CORS isn't an issue.

Answer 4

Try to access graphite through nginx (same origin). Just add new location

location /render {
                proxy_pass      http://xxx.xxx.xxx.xxx:8080/render;
}

then in your grafana config file change graphite url

Answer 5

This is the nginx config file I use to host both grafana and proxy graphite and elasticsearch.

 server {
    listen 81 default_server;
    server_name _;
    location / {
      root /src/grafana;
      index index.html;
    }
    location /graphite/ {
        proxy_pass                 http://127.0.0.1:8000/;
        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;
        proxy_set_header           X-Forwarded-Server  $host;
        proxy_set_header           X-Forwarded-Host  $host;
        proxy_set_header           Host  $host;

        client_max_body_size       10m;
        client_body_buffer_size    128k;

        proxy_connect_timeout      90;
        proxy_send_timeout         90;
        proxy_read_timeout         90;

        proxy_buffer_size          4k;
        proxy_buffers              4 32k;
        proxy_busy_buffers_size    64k;
        proxy_temp_file_write_size 64k;
    }

    location /elasticsearch/ {
        proxy_pass                 http://127.0.0.1:9200/;
        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;
        proxy_set_header           X-Forwarded-Server  $host;
        proxy_set_header           X-Forwarded-Host  $host;
        proxy_set_header           Host  $host;

        client_max_body_size       10m;
        client_body_buffer_size    128k;

        proxy_connect_timeout      90;
        proxy_send_timeout         90;
        proxy_read_timeout         90;

        proxy_buffer_size          4k;
        proxy_buffers              4 32k;
        proxy_busy_buffers_size    64k;
        proxy_temp_file_write_size 64k;
    }
  }

Answer 6

Another thing to try would be to use a CORS proxy if you cannot edit the NGinx config. I used the NPM package corsproxy to get around the graphite CORS issue.

Install the corsproxy package:

 mkdir graphiteProxy
 cd graphiteProxy
 npm install corsproxy
 echo "copy the version of http_proxy corsproxy depends on into"
 echo "your local node_modules"
 cp -r node_modules\corsproxy\node_modules\http-proxy node_modules\http_proxy
 touch app.js

app.js:

// point the grafana config.js to your local proxy: http://localhost:8081
var cors_proxy = require('corsproxy')
var http_proxy = require('http-proxy')
cors_proxy.options = {
   target : "http://{{graphiteserver}}:8080"
}
http_proxy.createServer(cors_proxy).listen(8081)

run the proxy:

node app.js