Change Grafana's headers (Access-Control-Allow-Origin)

Question

I'm trying to display a Grafana dashboard within a plain PHP page. I followed the website instructions to authentiate with oauth. Here is my code:

<?php 
$ch = curl_init();
$authorization = "Authorization: Bearer <myToken>";
curl_setopt_array(
    $ch, array( 
    CURLOPT_URL => 'url-to-my-dashboard',
    CURLOPT_HTTPHEADER => array('Content-Type: application/json' , $authorization),
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPAUTH => "HTTP/1.1"
));

$output = curl_exec($ch);
?>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <?php echo $output; ?>
    </body>
</html>

The page loads, I get the CSS... but I end up with a 404 error. I discover that Grafana's headers do not allow this kind of actions:

Access to Font at 'http://xxxxx' from origin 'http://localhost'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost' is therefore not allowed access.

I'm quite sure I need to configure these headers:

Header set Access-Control-Allow-Origin "xxx"
Header set Access-Control-Allow-Methods "GET, OPTIONS"
Header set Access-Control-Allow-Headers "origin, authorization, accept"

The problem is I don't know where I shall do it. I've been looking for an .htaccess file for Grafana (or Graphite, which we use with it). I've also tried modifying the Apache2 conf file (/etc/apache2/apache2/conf); after restart, nothing changes...

I'm quite stuck. Can anyone help me?

Have you been able to solve your issue? via @JMeterDude – Richard Slater Apr 30 '17 at 20:59 — Richard Slater, Apr 30 '17 at 20:59

Daniel Lee · Answer 1 · 2017-02-20T18:45:09.033

It is the browser that is blocking the requests and not Grafana due to the requests violating the Same Origin Policy. For localhost, two websites running on different ports are considered to be two different domains.

You will need to put your Grafana server behind a reverse proxy to allow Cross Origin resource sharing (CORS).

There is an issue describing this with a link to the docs.

Issue: https://github.com/grafana/grafana/issues/5837
Docs link: http://docs.grafana.org/v1.9/installation/#graphite-server-config

Extract from the docs (link above) describing the Apache config:

For Apache 2.x:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, OPTIONS"
Header set Access-Control-Allow-Headers "origin, authorization, accept"
Note that using "" leaves your graphite instance quite open so you might want to consider using "http://my.grafana.com" in place of ""

If your Graphite web is proteced by basic authentication, you have to enable the HTTP verb OPTIONS. Take note that when using basic auth Access-Control-Allow-Origin must not be set to a wildcard, also the header Access-Control-Allow-Credentials must be specified. This looks like the following for Apache:
Header set Access-Control-Allow-Origin    "http://mygrafana.com:5656"
Header set Access-Control-Allow-Methods   "GET, OPTIONS"
Header set Access-Control-Allow-Headers   "origin, authorization, accept"
Header set Access-Control-Allow-Credentials true

<Location />
    AuthName "graphs restricted"
    AuthType Basic
    AuthUserFile /etc/apache2/htpasswd
    <LimitExcept OPTIONS>
      require valid-user
    </LimitExcept>
</Location>

And here is an issue that describes the config for creating a reverse proxy for Grafana with Apache:

https://github.com/grafana/grafana/issues/4136

If those links do not help, there are a lot of closed issues about this in the Grafana repo. Here is a search for cors and apache:

https://github.com/grafana/grafana/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aclosed%20cors%20apache

Thank I'll try this and I tell you – Zoette Feb 20 '17 at 11:30 — Zoette, Feb 20 '17 at 11:30

Change Grafana's headers (Access-Control-Allow-Origin)

1 Answers1

Linked