How to use Grafana Http API with client-side javascript

Question

Is it possible to use the Grafana Http API with client-side javascript? I start with the very basic of getting the json of an already created dashboard.

function getHome2Dashboard(callback) {
  $.ajax({
      type: 'GET',
      url:  'http://localhost:3000/api/dashboards/db/home-2',
      crossDomain: true,
      dataType: 'json',
      headers: {
      "Authorization": "Bearer eyJrIjoiYkdURk91VkNQSTF3OVdBWmczYUNoYThPOGs0QTJWZVkiLCJuIjoidGVzdDEiLCJpZCI6MX0="
  },
  success: function(data)
  {     
      if( callback ) callback(data);
  },
  error: function(err)
  {
    console.log(err);
  }
}); 

but I get a:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

I also tried using a jsonp approach, dev tools show that the server sends back the json data but js fails because (I think) the result is not wrapped inside a callback function. Any suggestions on how to implement this are welcome...

// At the moment I think of something like:

┌──────────┐           ┌───────────┐
│  Browser │ <-------> │  Grafana  │
└──────────┘           └───────────┘

// In order to overcome the cross-origin problems,
// should I go towards something like this?:

┌──────────┐           ┌───────────┐           ┌───────────┐
│  Browser │ <-------> │  Web api  │ <-------> │  Grafana  │
└──────────┘           └───────────┘           └───────────┘

Answer 1

According to these links there is currently no way in Grafana to set CORS headers directly in the server, so you will need to put the Grafana server behind a reverse proxy like nginx and add the headers there.

See the Mozilla Developer documentation about CORS to understand the issue you are facing.