Trying to add Authentication for data source plugin leads to Bad Gateway Error

[tyner27]

In plugin.json I’ve added the following:

"routes": [
    {
      "path": "local",
      "url": "http://localhost:1337",
      "method": "GET",
      "headers": 
        [
          {
            "name": "Authorization",
            "content": "<my Authorization token>"
          }
        ]
      
    }
  ],

Aside from the boilerplate code added by grafana-toolkit I’ve added a call to getBackendSrv().fetch() by folowing the examples on the add authentication for data source plugins page

here’s what I’ve got in datasources.ts:

import defaults from 'lodash/defaults';

import {
  DataQueryRequest,
  DataQueryResponse,
  DataSourceApi,
  DataSourceInstanceSettings,
  MutableDataFrame,
  FieldType,
} from '@grafana/data';

import { getBackendSrv } from '@grafana/runtime'

import { MyQuery, MyDataSourceOptions, defaultQuery } from './types';

export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  url?: string;
  constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
    super(instanceSettings);

    this.url = instanceSettings.url;
  }

  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
    const routePath = '/local';
    const { range } = options;
    const from = range!.from.valueOf();
    const to = range!.to.valueOf();

    getBackendSrv().fetch({
      url: this.url + routePath,
      method: 'GET',
      params: {
        "start": from,
        "end": to,
        "params": "myParam"
      }
    }).subscribe(response => {
      console.log(response)
    })

    // Return a constant for each query.
    const data = options.targets.map((target) => {
      const query = defaults(target, defaultQuery);
      return new MutableDataFrame({
        refId: query.refId,
        fields: [
          { name: 'Time', values: [from, to], type: FieldType.time },
          { name: 'Value', values: [query.constant, query.constant], type: FieldType.number },
        ],
      });
    });

    return { data };
  }

  async testDatasource() {
    // Implement a health check for your data source.
    return {
      status: 'success',
      message: 'Success',
    };
  }
}

I keep getting 502 bad gateway error. It’s proving tricky to debug. please advise.

[marcusolsson]

Are you able to confirm whether http://localhost:1337 actually receives the request?

Since you linked to the authentication docs, I’m sure you’re aware of it, but rather than storing the actual token in the plugin.json, you should reference the property in the secureJsonData:

"content": "Bearer {{ .SecureJsonData.apiToken }}"

[tyner27]

Yes, Thank you marcusolsson. I’m putting the token in cleartext for now to reduce obfuscation as I try to troubleshoot this issue. http://localhost:1337 is running and receiving requests.

While debugging I did notice that instanceSettings.url did not contain the hostname (http://grafana.staged-by-discourse.com) it’s just set to the path /api/datasources/1/proxy. could the issue be that i need to specify a default host for the grafana server somewhere in configuration?

OS: Ubuntu 20.04

[tyner27]

I was able to troubleshoot this. It had to do with an error I was making on my end.