[BUG] Glances Widget with Basic Auth results in "Request failed with status code 401"

[cfrstr]

Environment

Self-Hosted (Docker)

Version

2.0.4

Describe the problem

The Glances Widgets fail to fetch data due to a 401 error. I've checked with both my browser and postman and I am 100% sure the credentials are correct. Both run on Docker. I had a few issues with cors before getting to this point so it maybe be related to that but I'm unsure, I've attached the Dashy config and console log as well the traefik configs for both to the additional info. Apologizes if this is a simple misconfiguration and not a bug.

Additional info

--- Dashy Console Log ---

CoolConsole.js:18 Stack Trace
Error: Request failed with status code 401
i @ CoolConsole.js:18
l @ ErrorHandler.js:27
error @ WidgetMixin.js:75
(anonymous) @ WidgetMixin.js:122
Promise.catch (async)
(anonymous) @ WidgetMixin.js:121
makeRequest @ WidgetMixin.js:113
fetchData @ GlancesMixin.js:27
update @ WidgetMixin.js:67
(anonymous) @ WidgetMixin.js:71

createError.js:16 Uncaught (in promise) Error: Request failed with status code 401
at e.exports (createError.js:16:15)
at e.exports (settle.js:17:12)
at XMLHttpRequest.x (xhr.js:66:7)

GET https://glances.redacted.tld/api/3/cpu 401
(anonymous) @ xhr.js:210
e.exports @ xhr.js:15
e.exports @ dispatchRequest.js:58
h.request @ Axios.js:112
(anonymous) @ bind.js:9
(anonymous) @ WidgetMixin.js:114
makeRequest @ WidgetMixin.js:113
fetchData @ GlancesMixin.js:27
update @ WidgetMixin.js:67
(anonymous) @ WidgetMixin.js:71

--- Dashy Widget Config ---

widgets:
- type: gl-current-cpu
  options:
    hostname: https://glances.redacted.tld
    username: glances
    password: <password>

--- Dashy Traefik Config ---

  - traefik.enable=true
  - traefik.docker.network=link
  - traefik.http.routers.dashy.rule=Host(`redacted.tld`)
  - traefik.http.routers.dashy.entrypoints=websecure
  - traefik.http.routers.dashy.tls=true
  - traefik.http.routers.dashy.tls.certresolver=letsencrypt
  - traefik.http.routers.dashy.middlewares=hsts@file,authelia@docker

--- Glances Traefik Config ---

  - traefik.enable=true
  - traefik.docker.network=link
  - traefik.http.routers.glances.rule=Host(`glances.redacted.tld`)
  - traefik.http.routers.glances.entrypoints=websecure
  - traefik.http.routers.glances.tls=true
  - traefik.http.routers.glances.tls.certresolver=letsencrypt
  - traefik.http.middlewares.corsglances.headers.accesscontrolallowmethods=GET,OPTIONS,PUT
  - traefik.http.middlewares.corsglances.headers.accesscontrolalloworiginlist=https://redacted.tld
  - traefik.http.middlewares.corsglances.headers.accesscontrolallowheaders=authorization,headers
  - traefik.http.middlewares.corsglances.headers.accesscontrolmaxage=100
  - traefik.http.middlewares.corsglances.headers.accesscontrolallowcredentials=true
  - traefik.http.middlewares.corsglances.headers.addvaryheader=true
  - traefik.http.routers.glances.middlewares=corsglances,hsts@file
  - traefik.http.services.glances.loadbalancer.server.port=61208
  - traefik.http.routers.glances.service=glances

Please tick the boxes

• You are using a supported version of Dashy (check the first two digits of the version number)
• You've checked that this issue hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[Lissy93]

Yeah, this seems like a bug with how the credentials are handled, probably in Glances mixin, or possibly in the widget mixin.

dashy/src/mixins/GlancesMixin.js

Lines 13 to 22 in 4c19d8c

	/* Optionally specify basic auth credentials for Glances instance */
	credentials() {
	if (this.options.username && this.options.password) {
	const stringifiedUser = `${this.options.username}:${this.options.password}`;
	const headers = { Authorization: `Basic ${window.btoa(stringifiedUser)}` };
	return { headers };
	}
	return null;
	},
	},

Sorry about that, will look into it this weekend.
Just to check, does it work as expected when Glances auth is not enabled?
And if the request made directly, or are you proxying it?

[cfrstr]

I went ahead and enabled the cors proxy and got a error error. It works fine without auth enabled.

GET https://redacted.tld/cors-proxy 500

tried opening it in the browser and got Cannot GET /cors-proxy

[Lissy93]

You shouldn't need the proxy for glances, I was just checking you weren't using it for when I debug this.
The proxy is a POST route, so you shouldn't see that GET error unless your making a GET request

[cfrstr]

Ah ok thank you for the quick response keep up the good work!

[Lissy93]

Hey @arlostt
Sorry for the delay in addressing this. Turned out to be that headers were double nested - my mistake. It's fixed in #557 / released in 2.0.6. Your config snippet is correct

I did notice that (at least in my setup) if Glances auth is enabled, then CORS will block client-side requests unless the domain is explicitly set as allow headers. If you face that issue, and are unable to get headers working on your Glances server, then setting useProxy: true in each Glances widget will fix that.

Feel free to reach out if you need anything else :)