Grafana dasboard on webpage

Grafana
1

Hello. I am trying to add a dashboard on my webpage, here is the code:

<iframe id="dashboard"></iframe>
<script type="text/javascript">
  $.ajax(
    {
      type: 'GET',
      url: 'http://grafana.staged-by-discourse.com/d/LpWrgk0Wk/iuzhnyi',
      contentType: 'application/json',
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader(
          'Authorization', 'Basic ' + window.btoa('apikey')
        );
      },
      success: function(data) {
        $('#dashboard').attr('src', 'http://grafana.staged-by-discourse.com/d/LpWrgk0Wk/iuzhnyi');
        $('#dashboard').contents().find('html').html(data);
      }
    }
  );
</script>

But the error gets out:

Access to XMLHttpRequest at 'http://grafana.staged-by-discourse.com/d/LpWrgk0Wk/iuzhnyi' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have apache2 server.
Although I added this to the apache config:

<VirtualHost *:80>     
Header set Access-Control-Allow-Origin "*"
</VirtualHost>
2

You should disable CORS in Apache server isn’t it?

1 Like
3

I disabled it in /etc/apache2/apache2.conf and /etc/apache2/sites-available/000-defaul.conf. Adding:

<VirtualHost *:80>     
Header set Access-Control-Allow-Origin "*"
</VirtualHost>

Correct if not so.