With traefik 3.0 mime detection is no loger automatic so reverse proxy failed

[yodatak]

Description of the bug

My jellyfin-vue K8S deployement

With traefik 3.0 mime detection is no longer automatic so it failed with jellyfin and jellyfin-vue , dont know if we could fixed it from vue side or not

Loading module from “https://jellyvue.XXX.XXX/server/assets/assets/common-BgfYU603.js” was blocked because of a disallowed MIME type (“text/html”). locales-RiEC8atR.js Loading module from “https://jellyvue.XXX.XXX/server/assets/assets/splashscreen-DgLNDoqp.js” was blocked because of a disallowed MIME type (“text/html”). locales-RiEC8atR.js Loading module from “https://jellyvue.XXX.XXX/server/assets/assets/locales-RiEC8atR.js” was blocked because of a disallowed MIME type (“text/html”). locales-RiEC8atR.js The stylesheet https://jellyvue.XXX.XXX/server/assets/assets/splashscreen-Dt0pxgvL.css was not loaded because its MIME type, “text/html”, is not “text/css”. locales-RiEC8atR.js Loading module from “https://jellyvue.XXX.XXX/server/assets/assets/main-BYj8ez8f.js” was blocked because of a disallowed MIME type (“text/html”). locales-RiEC8atR.js Loading failed for the module with source “https://jellyvue.XXX.XXX/server/assets/assets/main-BYj8ez8f.js”. locales-RiEC8atR.js:16:71 Loading failed for the module with source “https://jellyvue.XXX.XXX/server/assets/assets/common-BgfYU603.js”. locales-RiEC8atR.js:13:73 Loading failed for the module with source “https://jellyvue.XXX.XXX/server/assets/assets/splashscreen-DgLNDoqp.js”. locales-RiEC8atR.js:14:79 Loading failed for the module with source “https://jellyvue.XXX.XXX/server/assets/assets/locales-RiEC8atR.js”. locales-RiEC8atR.js:15:74 Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. node.js:416:1 The stylesheet https://jellyvue.XXX.XXX/server/assets/assets/main-IaX5mOV5.css was not loaded because its MIME type, “text/html”, is not “text/css”.

Maybe its linked to

In v3, the Content-Type header is not auto-detected anymore when it is not set by the backend. One should use the ContentType middleware to enable the Content-Type header value auto-detection. https://github.com/traefik/traefik/issues/10826#issuecomment-2180101731

https://github.com/traefik/traefik/issues/10826

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: jellyvue-deployment
  namespace: media
spec:
  replicas: 1
  revisionHistoryLimit: 3
  selector:
    matchLabels:
      app: jellyvue
  template:
    metadata:
      labels:
        app: jellyvue
    spec:
      containers:
        - name: jellyvue
          image: ghcr.io/jellyfin/jellyvue:unstable@sha256:495c4fc2dee2b3c8828745a3950885b22d0d3f0022b2a941e94cd39fb8c598a3
          ports:
            - containerPort: 80
          env:
            - name: DEFAULT_SERVERS
              value: "https://jellyfin.XXX.XXX"
            - name: DISABLE_SERVER_SELECTION
              value: "0"
---
apiVersion: v1
kind: Service
metadata:
  name: jellyvue-service
  namespace: media
spec:
  type: ClusterIP
  ports:
    - name: http
      targetPort: 80
      port: 80
      protocol: TCP
  selector:
    app: jellyvue
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: jellyvue-ingress
  namespace: media
  annotations:
    cert-manager.io/cluster-issuer: letsencrypt-prod
    traefik.ingress.kubernetes.io/router.tls: "true"
spec:
  rules:
    - host: jellyvue.XXX.XXX
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: jellyvue-service
                port:
                  number: 80
  tls:
    - hosts:
        - jellyvue.XXX.XXX
      secretName: jellyfinvue-tls-secret

My k8s jellyfin deployement

---
apiVersion: helm.toolkit.fluxcd.io/v2
kind: HelmRelease
metadata:
  name: jellyfin
  namespace: media
spec:
  chart:
    spec:
      chart: jellyfin
      interval: 15m
      reconcileStrategy: ChartVersion
      sourceRef:
        kind: HelmRepository
        name: truecharts-oci
        namespace: flux-system
      version: 20.1.16
  test:
    enable: true
    ignoreFailures: false
  install:
    remediation:
      retries: 1
  upgrade:
    remediation:
      retries: 1
      strategy: rollback
      remediateLastFailure: true
  interval: 15m
  values:
    TZ: Europe/Paris

    image:
      repository: ghcr.io/jellyfin/jellyfin
      pullPolicy: IfNotPresent
      tag: 10.9.8@sha256:836232f7ffa1fdac5d043a592806422c33c68da2616f303f831e3ac25bfb6f1a
    broadcastProxyImage:
      repository: docker.io/alpine/socat
      pullPolicy: IfNotPresent
      tag: 1.8.0.0@sha256:12f3d5a0faff84d0ca188e5d1f7e14a2cefe6b4a4ff6c67888a90641a84946f1

    resources:
      limits:
        nvidia.com/gpu: 1

    podOptions:
      runtimeClassName: "nvidia"

    autodiscovery:
      enabled: false

    ingress:
      main:
        enabled: true
        ingressClassName: traefik
        hosts:
          - host: XXX.XXX.XXX
            paths:
              - path: /
                pathType: Prefix
        tls:
          - hosts:
              - XXX.XXX.XXX
        integrations:
          traefik:
            enableFixedMiddlewares: false

Steps to reproduce

jellyfin and jellyfin vue behind traefik 3.0 reverse proxy

Expected behavior

works !

Logs

No response

Screenshots

No response

Platform

Linux

Browser

Firefox

Jellyfin server version

10.9

Additional context

No response

[ferferga]

What does the network tab of your browser displays as the response for those requests? Can you try accessing them directly and see what happens? These kind of errors usually happen when there's stuff cached (index.html in this case) and the request to the assets of the frontend returns the typical 404 page (that's why the mime type is text/html).

I doubt there's nothing I can do on our end here, but I'll try my best to troubleshoot the issue (though I have no idea about Traefik).

[ferferga]

Closing in the meantime until a follow-up is provided