Passing credentials for Grafana Cloud Loki API

Grafana Authentication
, ,
1

I’m trying to query data from a Grafana Loki Cloud.

This works:

curl -s -G "https://<user>:<API key>@<site>.grafana.net/loki/api/v1/query_range" --data-urlencode 'query={job="maplejob"}'

credentials in link

If I move it into JavaScript like this

const query_url = new URL('https://<user>:<API key>@<site>.grafana.net/loki/api/v1/query_range');
const params = new URLSearchParams(query_url.search);
params.set('query', '{job="maplejob"}');
query_url.search = params;

fetch(query_url.toString(), {})
    .then((response) => { console.log(response) })
    .catch(console.error);

I get the error:

TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials

credentials in header

If I move it into JavaScript like this

const query_url = new URL('https://<site>.grafana.net/loki/api/v1/query_range');
const params = new URLSearchParams(query_url.search);
params.set('query', '{job="maplejob"}');
query_url.search = params;

fetch(query_url.toString(), {
    headers: {
        'Authorization': `Basic ${btoa('<user>:<API key>')}`
    },
})
    .then((response) => { console.log(response) })
    .catch(console.error);

I get the error:

Access to fetch at '<query url>' from origin '<current page url>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

What do I do?