Hangfire: Accessing HangFire over Gateway is failing. Not able to load CSS and JS

Created on 9 Nov 2017 · 6Comments · Source: HangfireIO/Hangfire

I'm hosting HangFire on Application server under - https://domainurl:portnumber/
And HangFire dashboard URL would be: https://domainurl:portnumber/backgroundqueues
Application server is accessed over Gateway: https://gatewayurl/bl
So, final HangFire dashboard URL would be: https://gatewayurl/bl/backgroundqueues

I'm configuring HangFire dashboard in Owin startup using below code:
app.UseHangfireDashboard("/backgroundqueues", dashboardOptions);

When I’m trying to access HangFire dashboard it is not able to load the CSS and JS files, as it is trying to locate them at https://gatewayurl/backgroundqueues instead of https://gatewayurl/bl/backgroundqueues
Also, when I'm accessing other links on home page.
For ex., Jobs, it is not loading correct url: It is loading https://gatewayurl/backgroundqueues/jobs/enqueued instead of https://gatewayurl/bl/backgroundqueues/jobs/enqueued

One possible solution is to make the configuration
app.UseHangfireDashboard("./backgroundqueues", dashboardOptions);
But, currently it is invalid configuration

When the page is rendered all the relative paths have either "./" or nothing instead of "/".

HangFire.Core.dll version: 1.6.15.0
Application .NET version: 4.6.1

Please help me in resolving the issue.
Thanks in advance.

question

Source

kaushalcshah

Most helpful comment

Hi all,

I had the same issue when running Hangfire Dashboard behind an NGINX ingress controller in Kubernetes cluster. I tried several suggested solutions here but none seems to have solved our problem. Digging into it, I found this property PrefixPath. This ensures the path in generated HTML are prefixed. Such as..

<head>
  <title>Overview – Scheduler Dashboard</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="none">
  <link rel="stylesheet" href="/systemteam/starterkit/netcore-api/jobs/css17100">
 </head>

When running local, it should be accessible via http://localhost:8050/jobs but when running on k8s cluster, it should be via https://my-services-dev.mydomain.dk/systemteam/starterkit/netcore-api/jobs

My solution:

{
  "ServiceConfigurations": {
    "Environment": "Production",
    "ServiceInfo": {
      ...
      ...
      "BasePath": "/systemteam/starterkit/netcore-api",
    }
}

app.UseHangfireDashboard("/jobs", new DashboardOptions
{
    DashboardTitle = "Scheduler Dashboard",
    PrefixPath = (serviceConfiguration.Environment != ENVIRONMENT_NAMES.LocalDevelopment) ? serviceConfiguration.ServiceInfo.BasePath : null,
    IgnoreAntiforgeryToken = true,
    Authorization = new[] { new HangfireAuthorizationFilter() },
});

HTH

rdagumampan on 12 Apr 2020

👍2

All 6 comments

Adding link to discussion on HangFire forum: https://discuss.hangfire.io/t/accessing-hangfire-over-gateway-is-failing-not-able-to-load-css-and-js/4019

kaushalcshah on 9 Nov 2017

Your gateway is probably setting X-Forwarded-PathBase header when forwarding requests to the backend server (or at least could be configured to do so).

So you may set up an OWIN middleware to rewrite Request.PathBase value with a value from header if it is present. This should make the links to be correctly resolved.

Something like:
c# app.Use((context, next) => { var pathBase = context.Request.Headers["X-Forwarded-PathBase"]; if (pathBase != null) context.Request.PathBase = new PathString(pathBase); return next(); });

pieceofsummer on 9 Nov 2017

👍2

Hi pieceofsummer, Thanks a lot for help!!!
I'll try this out!!!

kaushalcshah on 10 Nov 2017

It worked for me. Thanks again for help!!!

kaushalcshah on 10 Nov 2017

Hi all,

<head>
  <title>Overview – Scheduler Dashboard</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="none">
  <link rel="stylesheet" href="/systemteam/starterkit/netcore-api/jobs/css17100">
 </head>

My solution:

{
  "ServiceConfigurations": {
    "Environment": "Production",
    "ServiceInfo": {
      ...
      ...
      "BasePath": "/systemteam/starterkit/netcore-api",
    }
}

app.UseHangfireDashboard("/jobs", new DashboardOptions
{
    DashboardTitle = "Scheduler Dashboard",
    PrefixPath = (serviceConfiguration.Environment != ENVIRONMENT_NAMES.LocalDevelopment) ? serviceConfiguration.ServiceInfo.BasePath : null,
    IgnoreAntiforgeryToken = true,
    Authorization = new[] { new HangfireAuthorizationFilter() },
});

HTH

rdagumampan on 12 Apr 2020

👍2

PrefixPath is missing now.