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> {
        getBackendSrv()
        .datasourceRequest({
          url: 'https://google.com',
          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 'https://google.com/' 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.

Regards,
V.

hey can you explain how you d this?

Hi @ahmedanis

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

V.

hi I am having the same issue has there ever been a resolve?

Hey there, I think you need to reach out to the team that build the backend API that you wanted to fetch the API using getBackendSrv method. The team need to set the http header Access-Control-Allow-Origin to true. This, in my opinion, is the backend issue. Hope this helps.