Grafana custom datasource - CORS and proxy

I’m trying to develop a custom plugin which can request a resource in the web (based on configuration). I’ve found this url mentioning Grafana proxy: Access data source from an app type plugin page

My understanding of it is I can use build-in proxy to make such a call, e.g.

  import { getBackendSrv } from '@grafana/runtime';
  async query(options: DataQueryRequest<HttpQuery>): Promise<DataQueryResponse> {
          url: '',
          method: 'GET',
        .then((data: any) => {
                console.log('DATA done, done, done', data);
       return {};

The problem is I still get a CORS error:

new-dashboard-copy?orgId=1:1 Access to fetch at '' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Am I missing something here? What do I need to do to achieve this?

Hello @sathokh

I use similar way to get data from my external server. Please take a look at code:

The only difference I see - I use backendSrv from datasource constructor.


hey can you explain how you d this?

Hi @ahmedanis

Happy to help, may you be more specific with a question?