What to do with 500 error in Grafana Cloud API?

Question

I'm trying to API query from Grafana Cloud.

I've got this JavaScript file:

const url = new URL('/<apache proxy>' + '/loki/api/v1/labels', window.location.origin);

const user = '<user>';
const apikey = '<apikey>';

fetch(url.toString(), {
    method: 'POST',
    headers: {
        'Authorization': 'Basic ' + btoa(user + ':' + apikey)
    },
})
    .then((response) => console.log(response));

(The proxy is to get around CORS errors.)

And it gives me this error:

Response {
    body: (...)
    bodyUsed: false
    headers: Headers {}
    ok: false
    redirected: false
    status: 500
    statusText: "Internal Server Error"
    type: "basic"
    url: "http://<server>/<proxy>/loki/api/v1/labels"
    [[Prototype]]: Response
}

How do I fix this?

Answer 1

I ended up solving this by altering the Apache reverse proxy file:

<VirtualHost *:80>
    ProxyPreserveHost on

    SSLProxyEngine on
    SSLProxyVerify none 
    SSLProxyCheckPeerCN off
    SSLProxyCheckPeerName off
    SSLProxyCheckPeerExpire off

    <Location /<proxy> >
        ProxyPass        <cloud url>
        ProxyPassReverse <cloud url>
        RequestHeader set Authorization "Basic <encoded code>"
            # encoded code from: btoa('<user>:<apikey>')
    </Location>
</VirtualHost>

The Authorization could be set in the JavaScript file as well, but setting it in the proxy means it's not visible and thus more secure.