I am building a DataSource Plugin, use getBackendSrv to Get data from an external API, but the request still made from the browser

[yinjialu]

The main advantage of getBackendSrv is that it proxies requests through the Grafana server rather making the request from the browser

[yinjialu]

I have use getBackendSrc but the request was made from the browser, which cause an CORS error

[academo]

HI @yinjialu

First keep in mind you should not use dataSourceRequest since this is a deprecated method. You should use fetch instead.

e.g:

const response = getBackendSrv().fetch({ url: 'https://jsonplaceholder.typicode.com/todos/' });
const jsonData = await lastValueFrom(response); // import { lastValueFrom } from 'rxjs'

When you use getBackendSrv to fetch a non-preconfigured url in your datasource it’ll go through the browser as you are experiencing in this case.

To make this request go through the backend you must save this url in the datasource configuration form as url and then you can use instanceSettings.url in your datasource to make the request (instead of the hardcoded url as in your code here).

This is very important when you start working with authentication in your API to prevent leaking credentials in your browser request.

You can find a full working example of this here and more specifically in the datasource.ts file.

Additionally check our documentation on adding authentication to your plugins and read about proxy routes to understand better how all this works and how to store more than one URL.

[yinjialu]

good morning @academo, thanks for you help, I have used fetch instead of dataSourceRequest, and add routes in plugin.json

"routes": [
    {
      "path": "notion",
      "url": "https://api.notion.com",
      "headers": [
        {
          "name": "Authorization",
          "content": "Bearer {{ .SecureJsonData.NOTION_KEY }}"
        }
      ]
    }
  ],

here is my code GitHub - yinjialu/Notion2Grafana at feat-dev
the NOTION_KEY is configured in ConfigEditor
now I get a new Error: the request get 502(Bad Gateway)

I don’t know whether the Error come from Grafana or Notion, and How to deal with this？

[academo]

Hi @yinjialu the code looks correct please make sure that the url you generate in the datasource frontend code is the one you expect. Keep in mind the url is replaced with the grafana proxy so you won’t see https://api.notion.com there.

502 usually means the upstream server (in this case the notion api) returned an invalid response so make sure you are using the correct URLs and tokens.

Also keep your eye in the grafana server output log. it might have more information about this error.

From your source code I can see you are sending a body with empty data. If your API queries information, shouldn’t you send that query as part of the request body?