longhorn: [BUG] Rancher proxying Longhorn UI results in a blank page

The Longhorn UI currently has not authentication mechanism, due to this and the fact that the UI schouldn’t be public at all, you should access the Longhorn UI via kubectl proxy or similarly.

I currently do this either by directly proxying via kubectl or letting Rancher proxy the service through the Rancher UI. In both cases this leads to a blank page when calling:

(through Rancher)

https://{myrancherhost}/k8s/clusters/{clusterid}/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/

(through kubectl’s proxying)

http://localhost:8001/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/

This due to the fact, I guess, that the resource references are not relative but absolute.

<link href="/styles.css?c15e53c34ff34663cd71" rel="stylesheet"></head>
<script type="text/javascript" src="/runtime~main.f38fec13.js?c15e53c34ff34663cd71"></script>
<script type="text/javascript" src="/styles.01ea0b6b.async.js?c15e53c34ff34663cd71"></script>
<script type="text/javascript" src="/main.783d8a16.async.js?c15e53c34ff34663cd71"></script>

The leading / shouldn’t be needed here and breaks the UI.

Is there a workaround to this or am doing something wrong?

When accessing the Longhorn UI with a LoadBalancer and a domain where the resources are accessible in the root directory, the UI is working fine.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 2
Comments: 30 (9 by maintainers)

Most upvoted comments

Tried to reproduce this issue:

Install longhorn with rancher Catalog
Expose longhorn app using L7 Load Balancer
If the ingress rule path set with / or empty, UI works fine
If change longhorn-ingress rule path, e.g. using /longhorn instead of / or empty. UI will return a blank page when accessing to <my-host>/longhorn

index.html request for static resource e.g. <your-host>/styles.css?2fb35317a6b0866b7af1, which should be <your-host>/longhorn/styles.css?2fb35317a6b0866b7af1

UI-image: longhornio/longhorn-ui:v0.8.0

@rsoika I’m not sure if that are the save steps as yours. Would you please share your ingress config? Or what about try to use / as ingress rule path as a workaround to see if it can help to solve your problem?

JacieChao on Apr 8, 2020

ok - it seems to be a CORS problem. I added a middleware object into my traefik.io configuraiton:


---
# Middleware for CORS
apiVersion: traefik.containo.us/v1alpha1
kind: Middleware
metadata:
  name: cors-all
  namespace: default
spec:
  headers:
    accessControlAllowMethods:
      - "GET"
      - "OPTIONS"
      - "PUT"
      - "POST"
    accessControlAllowOrigin: "origin-list-or-null"
    accessControlMaxAge: 100
    accessControlAllowHeaders:
      - "Content-Type"
    addVaryHeader: "true"

and also changed my Ingress Object

kind: Ingress
apiVersion: networking.k8s.io/v1beta1
metadata:
  name: longhorn-ui
  namespace: longhorn-system
  annotations:
    traefik.ingress.kubernetes.io/router.entrypoints: websecure
    traefik.ingress.kubernetes.io/router.middlewares: default-cors-all@kubernetescrd

spec:
  rules:
  - host: storage.ixchel.imixs.com
    http:
      paths:
      - path: /
        backend:
          serviceName: longhorn-frontend
          servicePort: 80

And now the UI works pretty fine. I wonder why there is a CORS issue? But maybe the problem is now solved for my setup.

rsoika on Apr 8, 2020

wangsiye/longhorn-ui:dcb50b0 This is the latest UI image. Would you please try this and give a feedback. thanks for your time. @rsoika

kubectl edit -n longhorn-system deployment longhorn-ui

Jietu20200316-165254

smallteeths on Mar 16, 2020

Here’s a workaround for FluxCD by patching the HelmRelease using postRenderers because the pathType value is hardcoded in the Helm template.

apiVersion: helm.toolkit.fluxcd.io/v2beta2
kind: HelmRelease
metadata:
  name: longhorn
spec:
  #...
  postRenderers:
    - kustomize:
        patches:
          - target:
              version: v1
              kind: Ingress
              name: longhorn-ingress
            patch: |-
              - op: replace
                path: /spec/rules/0/http/paths/0/pathType
                value: Prefix

mydoomfr on Apr 16, 2024

Same issue with AWS ALB Ingress. We need to have an option to change pathType.

Tarasovych on Apr 4, 2023

@ceelian As an alternative, you can also create a simple authenticated ingress to help. You can take a look at https://github.com/longhorn/longhorn/blob/master/docs/longhorn-ingress.md for reference. Though RBAC won’t work in this case.

We are still working on the issue in your environment.

yasker on Mar 31, 2020

@smallteeths I have now tested the image wangsiye/longhorn-ui:dcb50b0.

There seems to be no more ui javascript errors. It all works great now!!

Thanks a lot for good your work.

rsoika on Mar 20, 2020