Kavita behind Caddy Reverse Proxy

1. The problem I’m having:

I am trying to use Caddy to reverse proxy to a Kavita Docker image. I am able to access it directly via an IP address + port but I am not able to get it working via reverse_proxy. I have a few services proxied and they are working as-intended. Example request:

*   Trying 100.93.230.123:443...
* Connected to shardbearer.banteng-gopher.ts.net (100.93.230.123) port 443 (#0)
* ALPN: offers h2,http/1.1
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
*  CAfile: /etc/ssl/certs/ca-certificates.crt
*  CApath: /etc/ssl/certs
* TLSv1.3 (IN), TLS handshake, Server hello (2):
* TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
* TLSv1.3 (IN), TLS handshake, Certificate (11):
* TLSv1.3 (IN), TLS handshake, CERT verify (15):
* TLSv1.3 (IN), TLS handshake, Finished (20):
* TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.3 (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / TLS_AES_128_GCM_SHA256
* ALPN: server accepted h2
* Server certificate:
*  subject: CN=shardbearer.banteng-gopher.ts.net
*  start date: Feb 11 18:01:25 2025 GMT
*  expire date: May 12 18:01:24 2025 GMT
*  subjectAltName: host "shardbearer.banteng-gopher.ts.net" matched cert's "shardbearer.banteng-gopher.ts.net"
*  issuer: C=US; O=Let's Encrypt; CN=E6
*  SSL certificate verify ok.
* using HTTP/2
* h2h3 [:method: GET]
* h2h3 [:path: /kavita]
* h2h3 [:scheme: https]
* h2h3 [:authority: shardbearer.banteng-gopher.ts.net]
* h2h3 [user-agent: curl/7.88.1]
* h2h3 [accept: */*]
* Using Stream ID: 1 (easy handle 0x55d405985ce0)
> GET /kavita HTTP/2
> Host: shardbearer.banteng-gopher.ts.net
> user-agent: curl/7.88.1
> accept: */*
>
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
< HTTP/2 200
< alt-svc: h3=":443"; ma=2592000
< content-security-policy: frame-ancestors 'none';
< content-type: text/HTML
< date: Thu, 13 Feb 2025 09:52:33 GMT
< last-modified: Thu, 13 Feb 2025 06:20:38 GMT
< server: Caddy
< server: Kestrel
< vary: Accept-Encoding
< x-frame-options: SAMEORIGIN
<
<!doctype html>
<html lang="en" role="main" data-critters-container>
<head>
  <meta charset="utf-8">
  <title>Kavita</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
  <link rel="manifest" href="site.webmanifest">
  <link rel="shortcut icon" href="assets/icons/favicon.ico">
  <meta name="msapplication-TileColor" content="#4ac694">
  <meta name="msapplication-config" content="assets/icons/browserconfig.xml">
  <meta name="theme-color" content="#000000">
  <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
  <!-- Don't allow indexing from Bots -->
  <meta name="robots" content="noindex,nofollow">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

<style>@charset "UTF-8";:root{--swiper-theme-color:#007aff}:root,:root .default{--elevation-layer0:rgba(255,255,255,0);--elevation-layer1:rgba(255,255,255,.05);--elevation-layer2:rgba(255,255,255,.07);--elevation-layer3:rgba(255,255,255,.08);--elevation-layer4:rgba(255,255,255,.09);--elevation-layer5:rgba(255,255,255,.11);--elevation-layer6:rgba(255,255,255,.12);--elevation-layer7:rgba(255,255,255,.14);--elevation-layer8:rgba(255,255,255,.15);--elevation-layer9:rgba(255,255,255,.16);--elevation-layer10:rgba(255,255,255,.4);--elevation-layer0-dark:rgba(0, 0, 0,0);--elevation-layer1-dark:rgba(0, 0, 0,.05);--elevation-layer2-dark:rgba(0, 0, 0,.07);--elevation-layer3-dark:rgba(0, 0, 0,.08);--elevation-layer4-dark:rgba(0, 0, 0,.09);--elevation-layer5-dark:rgba(0, 0, 0,.11);--elevation-layer6-dark:rgba(0, 0, 0,.12);--elevation-layer7-dark:rgba(0, 0, 0,.14);--elevation-layer8-dark:rgba(0, 0, 0,.15);--elevation-layer9-dark:rgba(0, 0, 0,.16);--elevation-layer10-dark:rgba(0, 0, 0, .4);--elevation-layer11-dark:rgba(0, 0, 0, .6);--elevation-layer0-dark-solid:#121212;--elevation-layer1-dark-solid:#1D1D1D;--elevation-layer2-dark-solid:#212121;--elevation-layer3-dark-solid:#242424;--elevation-layer4-dark-solid:#272727;--elevation-layer5-dark-solid:#2C2C2C;--elevation-layer6-dark-solid:#2D2D2D;--elevation-layer7-dark-solid:#323232;--elevation-layer8-dark-solid:#353535;--elevation-layer9-dark-solid:#373737;--primary-color:#4ac694;--primary-color-dark-shade:#3B9E76;--primary-color-darker-shade:#338A67;--primary-color-darkest-shade:#25624A;--error-color:#BD362F;--warning-color:#FFECB5;--bs-body-bg:#1f2020;--body-text-color:#efefef;--btn-icon-filter:invert(1) grayscale(100%) brightness(200%);--primary-color-scrollbar:rgba(255,255,255,.3);--default-state-scrollbar:transparent;--text-muted-color:hsla(0,0%,100%,.45);--colorscape-enabled:true;--colorscape-primary-color:rgb(38, 38, 38);--colorscape-lighter-color:rgb(32, 32, 32);--colorscape-darker-color:rgb(28, 28, 28);--colorscape-complementary-color:rgb(51, 51, 51);--colorscape-primary-alpha-color:rgba(38, 38, 38, 0);--colorscape-lighter-alpha-color:rgba(32, 32, 32, 0);--colorscape-darker-alpha-color:rgba(28, 28, 28, 0);--colorscape-complementary-alpha-color:rgba(51, 51, 51, 0);--colorscape-primary-default-color:rgb(38, 38, 38);--colorscape-lighter-default-color:rgb(32, 32, 32);--colorscape-darker-default-color:rgb(28, 28, 28);--colorscape-complementary-default-color:rgb(51, 51, 51);--theme-color:#000000;--color-scheme:dark;--tile-color:var(--primary-color);--nav-offset:60px;--nav-mobile-offset:55px;--mobile-series-img-background:true;--setting-header-text-color:#d5d5d5;--setting-header-font-size:1.2rem;--setting-header-font-weight:bold;--setting-break-color:rgba(255, 255, 255, .2);--table-header-bg-color:rgba(0,0,0,.15);--table-header-text-color:hsla(0,0%,100%,.9);--table-body-bg-color:hsla(0,0%,100%,.02);--table-body-text-color:hsla(0,0%,100%,.85);--table-body-border:hidden;--table-body-striped-bg-color:var(--elevation-layer2);--navbar-bg-color:black;--navbar-text-color:white;--navbar-fa-icon-color:white;--navbar-border-radius:0px;--navbar-btn-hover-outline-color:rgba(255, 255, 255, 1);--navbar-header-margin:0px;--navbar-header-mobile-x-margin:0px;--navbar-header-mobile-y-margin:0px;--input-bg-color:#343a40;--input-bg-readonly-color:#434648;--input-focused-border-color:#ccc;--input-text-color:#fff;--input-placeholder-color:#aeaeae;--input-border-color:#ccc;--input-focus-boxshadow-color:rgb(255 255 255 / 50%);--btn-focus-boxshadow-color:rgb(255 255 255 / 50%);--btn-primary-text-color:white;--btn-primary-bg-color:var(--primary-color);--btn-primary-border-color:var(--primary-color);--btn-primary-hover-text-color:white;--btn-primary-hover-bg-color:var(--primary-color-darker-shade);--btn-primary-hover-border-color:var(--primary-color-darker-shade);--btn-primary-outline-text-color:white;--btn-primary-outline-bg-color:transparent;--btn-primary-outline-border-color:var(--primary-color);--btn-primary-outline-hover-text-color:white;--btn-primary-outline-hover-bg-color:var(--primary-color-darker-shade);--btn-primary-outline-hover-border-color:var(--primary-color-darker-shade);--btn-secondary-text-color:white;--btn-secondary-bg-color:#6c757d;--btn-secondary-border-color:#6c757d;--btn-secondary-hover-bg-color:var(--bs-btn-hover-bg);--btn-secondary-hover-border-color:var(--bs-btn-hover-border-color);--btn-secondary-font-weight:bold;--btn-secondary-outline-text-color:white;--btn-secondary-outline-bg-color:transparent;--btn-secondary-outline-border-color:transparent;--btn-secondary-outline-hover-bg-color:transparent;--btn-secondary-outline-hover-border-color:transparent;--btn-secondary-outline-font-weight:bold;--btn-primary-text-text-color:white;--btn-secondary-text-text-color:lightgrey;--btn-danger-text-text-color:var(--error-color);--btn-danger-outline-text-color:white;--btn-danger-outline-bg-color:transparent;--btn-danger-outline-border-color:var(--error-color);--btn-danger-outline-hover-text-color:white;--btn-danger-outline-hover-bg-color:var(--error-color);--btn-danger-outline-hover-border-color:var(--error-color);--btn-alt-bg-color:#424c72;--btn-alt-border-color:#444f75;--btn-alt-hover-bg-color:#3b4466;--btn-alt-focus-bg-color:#343c59;--btn-alt-focus-boxshadow-color:rgb(255 255 255 / 50%);--btn-fa-icon-color:white;--btn-disabled-bg-color:#343a40;--btn-disabled-text-color:white;--btn-disabled-border-color:#6c757d;--bs-btn-disabled-border-color:transparent;--btn-actions-border-radius:.375rem;--btn-actions-hover-bg:rgb(255 255 255 / 18%);--nav-item-min-width:150px;--nav-item-max-width:150px;--nav-tab-border-color:rgba(44, 118, 88, .7);--nav-tab-text-color:var(--elevation-layer10);--nav-tab-bg-color:transparent;--nav-tab-border-width:0 0 3px 0;--nav-tab-hover-border-color:var(--primary-color);--nav-tab-active-text-color:white;--nav-tab-border-hover-color:transparent;--nav-tab-hover-text-color:white;--nav-tab-hover-bg-color:transparent;--nav-tab-border-top:transparent;--nav-tab-border-left:transparent;--nav-tab-border-bottom:var(--primary-color);--nav-tab-border-right:transparent;--nav-tab-hover-border-top:transparent;--nav-tab-hover-border-left:transparent;--nav-tab-hover-border-bottom:var(--primary-color);--nav-tab-hover-border-right:transparent;--nav-tab-active-hover-bg-color:transparent;--nav-link-bg-color:var(--primary-color);--nav-link-active-text-color:white;--nav-link-text-color:var(--elevation-layer10);--modal-bg-color:#202122;--nav-header-text-color:white;--nav-header-bg-color:rgb(22, 27, 34);--toast-success-bg-color:rgba(59, 158, 118, .9);--toast-error-bg-color:#BD362F;--toast-info-bg-color:#2F96B4;--toast-warning-bg-color:#F89406;--alert-text-color:#fff3cd;--alert-bg-color:transparent;--checkbox-checked-bg-color:var(--primary-color);--checkbox-border-color:var(--input-focused-border-color);--checkbox-focus-border-color:var(--primary-color);--checkbox-focus-boxshadow-color:rgb(255 255 255 / 50%);--tagbadge-border-color:rgba(239, 239, 239, .125);--tagbadge-text-color:var(--body-text-color);--tagbadge-bg-color:var(--nav-tab-hover-bg-color);--tagbadge-filled-border-color:rgba(239, 239, 239, .125);--tagbadge-filled-text-color:var(--body-text-color);--tagbadge-filled-bg-color:var(--primary-color);--side-nav-width:230px;--side-nav-icon-size:.9rem;--side-nav-bg-color:var(--elevation-layer9-dark);--side-nav-mobile-bg-color:var(--elevation-layer2-dark-solid);--side-nav-openclose-transition:.15s ease-in-out;--side-nav-box-shadow:var(--elevation-layer0);--side-nav-mobile-box-shadow:3px 0em 5px 10em rgb(0 0 0 / 50%);--side-nav-hover-text-color:white;--side-nav-hover-bg-color:black;--side-nav-text-color:hsla(0,0%,100%,.85);--side-nav-border-radius:3px;--side-nav-border:none;--side-nav-border-closed:none;--side-nav-border-transition:.5s ease-in-out;--side-nav-companion-bar-transistion:.15s linear;--side-nav-bg-color-transition:.5s ease-in-out;--side-nav-closed-bg-color:transparent;--side-nav-item-active-color:var(--primary-color);--side-nav-item-active-text-color:#fff;--side-nav-active-bg-color:transparent;--side-nav-overlay-color:var(--elevation-layer11-dark);--side-nav-item-closed-color:var(--elevation-layer10);--side-nav-item-closed-hover-color:white;--list-group-item-text-color:var(--body-text-color);--list-group-item-bg-color:transparent;--search-list-group-item-bg-color:rgb(32, 38, 41);--list-group-hover-text-color:white;--list-group-hover-bg-color:rgb(22, 27, 34);--list-group-active-border-color:none;--list-group-item-border-top-left-radius:0px;--list-group-item-border-top-right-radius:0px;--list-group-item-border-bottom-left-radius:0px;--list-group-item-border-bottom-right-radius:0px;--list-group-item-border-width:1px 0 1px 0;--list-group-item-border-color:rgba(239, 239, 239, .125);--list-group-item-border-style:solid;--list-group-item-first-border-width:0px 0px 1px 0px;--list-group-item-last-border-width:0px 0px 0px 0px;--popover-body-bg-color:#2C2C2C;--popover-body-text-color:var(--navbar-text-color);--popover-outerarrow-color:transparent;--popover-arrow-color:transparent;--popover-bg-color:black;--popover-border-color:black;--pagination-active-link-border-color:var(--primary-color);--pagination-active-link-bg-color:var(--primary-color);--pagination-active-link-text-color:white;--pagination-link-border-color:rgba(239, 239, 239, .125);--pagination-link-text-color:white;--pagination-link-bg-color:rgba(1, 4, 9, .5);--pagination-focus-border-color:var(--primary-color);--pagination-link-hover-color:var(--primary-color);--progress-striped-animated-color:linear-gradient(45deg, rgba(74,198,148, .75) 25%, rgba(51, 138, 103, .75) 25%, rgba(51, 138, 103, .75) 50%, rgba(74,198,148, .75) 50%, rgba(74,198,148, .75) 75%, rgba(51, 138, 103, .75) 75%, rgba(51, 138, 103, .75));--progress-bg-color:var(--nav-header-bg-color);--progress-bar-color:var(--primary-color-dark-shade);--dropdown-item-hover-text-color:white;--dropdown-item-hover-bg-color:var(--primary-color-dark-shade);--dropdown-item-text-color:var(--navbar-text-color);--dropdown-item-bg-color:#2C2C2C;--dropdown-overlay-color:var(--elevation-layer1);--accordion-header-text-color:rgba(74, 198, 148, .9);--accordion-header-bg-color:rgba(52, 60, 70, .5);--accordion-body-bg-color:#292929;--accordion-body-border-color:rgba(239, 239, 239, .125);--accordion-body-text-color:var(--body-text-color);--accordion-header-collapsed-text-color:rgba(74, 198, 148, .9);--accordion-header-collapsed-bg-color:#292929;--accordion-button-focus-border-color:unset;--accordion-button-focus-box-shadow:unset;--accordion-active-body-bg-color:#292929;--accordion-body-box-shadow:none;--breadcrumb-bg-color:#292d32;--breadcrumb-item-text-color:var(--body-text-color);--ratingstar-color:white;--rating-star-color:var(--primary-color);--ratingstar-star-empty:#b0c4de;--ratingstar-star-filled:var(--primary-color);--hr-color:rgba(239, 239, 239, .125);--accent-bg-color:rgba(1, 4, 9, .5);--accent-text-color:lightgrey;--grid-breakpoints-xs:$grid-breakpoints-xs;--grid-breakpoints-sm:$grid-breakpoints-sm;--grid-breakpoints-md:$grid-breakpoints-md;--grid-breakpoints-lg:$grid-breakpoints-lg;--grid-breakpoints-xl:$grid-breakpoints-xl;--body-font-family:"EBGaramond", "Helvetica Neue", sans-serif;--brand-font-family:"Spartan", sans-serif;--html-font-size:16px;--card-bg-color:var(--elevation-layer3);--card-text-color:var(--body-text-color);--card-border-width:0 1px 1px 1px;--card-border-style:solid;--card-border-color:transparent;--card-border-radius:5px;--card-progress-bar-color:var(--primary-color);--card-overlay-bg-color:rgba(0, 0, 0, 0);--card-overlay-hover-bg-color:rgba(30,30,30,.6);--card-progress-triangle-size:28px;--slider-text-color:white;--input-range-color:var(--primary-color);--input-range-active-color:var(--primary-color-darker-shade);--manga-reader-overlay-filter:blur(10px);--manga-reader-overlay-bg-color:rgba(0,0,0,.5);--manga-reader-overlay-text-color:white;--manga-reader-next-highlight-bg-color:rgba(65, 225, 100, .5);--manga-reader-prev-highlight-bg-color:rgba(65, 105, 225, .5);--radio-accent-color:var(--primary-color);--radio-hover-accent-color:var(--primary-color);--radio-focus-boxshadow-color:rgb(255 255 255 / 50%);--carousel-header-text-color:var(--body-text-color);--carousel-header-text-decoration:none;--carousel-hover-header-text-decoration:none;--carousel-btn-color:var(--body-text-color);--drawer-bg-color:#292929;--drawer-text-color:white;--event-widget-bg-color:rgb(1, 4, 9);--event-widget-item-bg-color:rgb(1, 4, 9);--event-widget-text-color:var(--body-text-color);--event-widget-item-border-color:rgba(53, 53, 53, .5);--event-widget-border-color:rgba(1, 4, 9, .5);--event-widget-info-bg-color:#b6d4fe;--event-widget-error-bg-color:var(--error-color);--event-widget-update-bg-color:var(--primary-color);--event-widget-activity-bg-color:var(--primary-color);--search-result-text-lite-color:initial;--searchbar-bg-color:rgb(255 255 255 / 12%);--bulk-selection-text-color:var(--navbar-text-color);--bulk-selection-highlight-text-color:var(--primary-color);--bulk-selection-bg-color:black;--card-list-item-bg-color:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 1%, rgba(0,0,0,0) 100%);--review-card-star-color:gold;--review-spoiler-bg-color:var(--primary-color);--review-spoiler-text-color:var(--body-text-color);--badge-text-color:var(--bs-badge-color);--login-card-bg-color:#212121;--login-logo-image:url(/assets/images/logo.png);--login-logo-height:55px;--login-logo-width:55px;--login-logo-bg-size:contain;--login-logo-bg-repeat:no-repeat;--login-card-border-width:3px 0px 0px 0px;--login-card-border-style:solid;--login-card-border-color:var(--primary-color);--login-input-border-color:transparent;--login-input-border-color-focus:transparent;--login-input-box-shadow-focus:0 0 0 1px rgba(74, 198, 148, .8);--login-input-background-color:#353535;--login-input-color:#fff;--login-forgot-password-color:var(--primary-color);--login-background-url:url("./media/login-bg-3F52TUWZ.jpg");--login-background-size:cover;--login-background-opacity:.3;--login-background-color:#000;--login-input-font-family:"League Spartan", sans-serif;--login-input-placeholder-opacity:.5;--login-input-placeholder-color:#fff}:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#4ac694;--bs-danger:#BD362F;--bs-secondary:#6c757d;--bs-light:#f8f9fa;--bs-primary-rgb:74, 198, 148;--bs-danger-rgb:189, 54, 47;--bs-secondary-rgb:108, 117, 125;--bs-light-rgb:248, 249, 250;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, .75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, .5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13, 110, 253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10, 88, 202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm:0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width:.25rem;--bs-focus-ring-opacity:.25;--bs-focus-ring-color:rgba(13, 110, 253, .25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px}@property --color-1{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-2{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-3{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-4{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-5{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-6{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-7{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-8{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-9{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-10{syntax:"<color>";initial-value:transparent;inherits:true}@property --color{syntax:"<color>";inherits:true}@property --chart-bg-color{syntax:"<color>";inherits:true}@property --aspect-ratio{syntax:"<ratio>";initial-value:auto;inherits:true}@property --labels-size{syntax:"<length>";initial-value:0;inherits:true}@property --labels-align-block{syntax:"<string>";inherits:true}@property --labels-align-inline{syntax:"<string>";inherits:true}@property --primary-axis-width{syntax:"<length>";initial-value:1px;inherits:true}@property --secondary-axes-width{syntax:"<length>";initial-value:1px;inherits:true}@property --data-axes-width{syntax:"<length>";initial-value:1px;inherits:true}@property --legend-border-width{syntax:"<length>";initial-value:1px;inherits:true}@property --primary-axis-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --secondary-axes-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --data-axes-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --legend-border-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --primary-axis-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --secondary-axes-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --data-axes-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --legend-border-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --start{syntax:"<number>";inherits:true}@property --end{syntax:"<number>";inherits:true}@property --size{syntax:"<number>";inherits:true}@property --line-size{syntax:"<number>";inherits:true}:root{--select2-single-height:36px;--select2-multiple-height:36px;--select2-label-text-color:#000;--select2-required-color:red;--select2-selection-border-radius:4px;--select2-selection-background:var(--input-bg-readonly-color);--select2-selection-disabled-background:#eee;--select2-selection-border-color:var(--input-border-color);--select2-selection-focus-border-color:var(--input-focus-boxshadow-color);--select2-selection-text-color:var(--input-text-color);--select2-selection-choice-background:var(--tagbadge-filled-bg-color);--select2-selection-choice-text-color:var(--tagbadge-filled-text-color);--select2-selection-choice-border-color:var(--tagbadge-border-color);--select2-selection-choice-close-color:var(--tagbadge-filled-text-color);--select2-selection-choice-hover-close-color:var(--tagbadge-filled-text-color);--select2-placeholder-color:#999;--select2-placeholder-overflow:ellipsis;--select2-no-result-color:#888;--select2-no-result-font-style:italic;--select2-too-much-result-color:#888;--select2-too-much-result-style:italic;--select2-reset-color:#999;--select2-arrow-color:#ccc;--select2-dropdown-background:var(--input-bg-readonly-color);--select2-dropdown-border-color:var(--input-border-color);--select2-overlay-backdrop:transparent;--select2-search-border-color:var(--input-border-color);--select2-search-background:var(--input-bg-readonly-color);--select2-search-border-radius:0px;--select2-option-text-color:var(--body-text-color);--select2-option-disabled-text-color:#999;--select2-option-disabled-background:transparent;--select2-option-selected-text-color:lightgrey;--select2-option-selected-background:var(--btn-disabled-bg-color);--select2-option-highlighted-text-color:#fff;--select2-option-highlighted-background:#5897fb;--select2-option-group-text-color:var(--body-text-color);--select2-option-group-background:transparent;--select2-hint-text-color:#888}html{font-size:var(--html-font-size)}html,body{height:100%;overflow:hidden}body{margin:0;font-family:var(--body-font-family);color:var(--body-text-color);color-scheme:var(--color-scheme);max-height:100%;overflow-y:auto}@font-face{font-family:Spartan;src:url("./media/Spartan-VariableFont_wght-NM2LR5HQ.woff2") format("woff2");font-display:swap}@font-face{font-family:Poppins;src:url("./media/Poppins-SFWTNBQB.woff2") format("woff2");font-display:swap}@font-face{font-family:League Spartan;src:url("./media/LeagueSpartan-VariableFont_wght-2EBMJPE4.ttf");font-display:swap}app-root{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3)}body{font-family:Poppins,sans-serif;overflow:hidden;scrollbar-color:rgba(255,255,255,.3) rgba(0,0,0,.1);scrollbar-width:thin;padding:0;margin:0}:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url("./media/fa-brands-400-MDS4TU4L.woff2") format("woff2"),url("./media/fa-brands-400-CNBICIQT.ttf") format("truetype")}:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url("./media/fa-regular-400-N56QV3DR.woff2") format("woff2"),url("./media/fa-regular-400-2FI4ICQD.ttf") format("truetype")}:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url("./media/fa-solid-900-Z3HFQTXF.woff2") format("woff2"),url("./media/fa-solid-900-XVWCCN5V.ttf") format("truetype")}</style><link rel="stylesheet" href="styles-OSMUEMQ3.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-OSMUEMQ3.css"></noscript></head>
<body class="mat-typography default" theme="dark">
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
<link rel="modulepreload" href="chunk-MFNSJITH.js"><link rel="modulepreload" href="chunk-VIBKPRU6.js"><link rel="modulepreload" href="chunk-BXJYX7MP.js"><link rel="modulepreload" href="chunk-E7ZRNGXF.js"><link rel="modulepreload" href="chunk-K3WBUCUC.js"><link rel="modulepreload" href="chunk-AF43YU3D.js"><link rel="modulepreload" href="chunk-ZP7F2M2I.js"><link rel="modulepreload" href="chunk-HCPIVMPE.js"><link rel="modulepreload" href="chunk-DNPS474R.js"><link rel="modulepreload" href="chunk-7NMVE5II.js"><script src="polyfills-KSD5EUEV.js" type="module"></script><script src="main-GA3JORTM.js" type="module"></script></body>
</html>
* Connection #0 to host shardbearer.banteng-gopher.ts.net left intact

2. Error messages and/or full log output:

Loading module from “https://shardbearer.banteng-gopher.ts.net/chunk-MFNSJITH.js” was blocked because of a disallowed MIME type (“text/html”).

3. Caddy version:

nicfitzgerald@shardbearer:~/docker$ caddy version
2.6.2

4. How I installed and ran Caddy:

I followed the official installation guide and installed it using sudo apt install caddy

a. System environment:

I am running Debian 12 AMD64. I have Docker installed but it is unrelated to Caddy. For sake of never too much info:

nicfitzgerald@shardbearer:~/docker$ docker version
Client: Docker Engine - Community
 Version:           27.5.1
 API version:       1.47
 Go version:        go1.22.11
 Git commit:        9f9e405
 Built:             Wed Jan 22 13:41:17 2025
 OS/Arch:           linux/amd64
 Context:           default

Server: Docker Engine - Community
 Engine:
  Version:          27.5.1
  API version:      1.47 (minimum version 1.24)
  Go version:       go1.22.11
  Git commit:       4c9b3b0
  Built:            Wed Jan 22 13:41:17 2025
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.7.25
  GitCommit:        bcc810d6b9066471b0b6fa75f557a15a1cbf31bb
 runc:
  Version:          1.2.4
  GitCommit:        v1.2.4-0-g6c52b3f
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0

b. Command:

caddy fmt --overwrite Caddyfile
caddy run

c. Service/unit/compose file:

Kavita Docker Compose file:

services:
  kavita:
    image: lscr.io/linuxserver/kavita:latest
    container_name: kavita
    environment:
      - PUID=$PUID
      - PGID=$PGID
      - TZ=$TZ
      - DOTNET_SYSTEM_GLOBALIZATION_INVARIANT=true
    volumes:
      - $DOCKERDIR/appdata/kavita/data:/config
      - $BULKDIR/Comics:/comics
      - $BULKDIR/Manga:/manga
    ports:
      - 5000:5000
    networks:
      - socket_proxy
    restart: unless-stopped

d. My complete Caddy config:

shardbearer.banteng-gopher.ts.net {
        handle_path /calibre-web* {
                reverse_proxy 100.93.230.123:8083 {
                        header_up X-Scheme https
                        header_up X-Script-Name /calibre-web
                }
        }
        handle_path /audiobookshelf* {
                encode gzip zstd
                reverse_proxy 100.93.230.123:8090
        }
        handle_path /kavita* {
                reverse_proxy * 100.93.230.123:5000 {
                        header_up X-Forwarded-Host {host}:5000
                        header_up -Origin
                        header_up -Referer
                }
        }
        handle {
                reverse_proxy 100.93.230.123:3000
        }
}

5. Links to relevant resources:

Kavita has their own Caddy example (Kavita Caddy Example) but I was not able to get it to work.

Is this a Caddy error message? This seems more like a browser or in-browser web app complaining about a JavaScript file having the wrong MIME type, causing the browser to refuse to load it.

It is a browser error* message but it’s caused by the way that Caddy is delivering the page, as it doesn’t occur when I am browsing straight to the IP:PORT.

This is the cause of your problem:

<base href="/">

Your initial request is:

https://shardbearer.banteng-gopher.ts.net/kavita

which tells Caddy to proxy the traffic to:

100.93.230.123:5000

and the back-end returns the content of that page:

<html lang="en" role="main" data-critters-container>
<head>
  <meta charset="utf-8">
  <title>Kavita</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
  <link rel="manifest" href="site.webmanifest">
  <link rel="shortcut icon" href="assets/icons/favicon.ico">
  <meta name="msapplication-TileColor" content="#4ac694">
  <meta name="msapplication-config" content="assets/icons/browserconfig.xml">
  <meta name="theme-color" content="#000000">
  <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
  <!-- Don't allow indexing from Bots -->
  <meta name="robots" content="noindex,nofollow">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

<style>@charset "UTF-8";:root{--swiper-theme-color:#007aff}:root,:root .default{--elevation-layer0:rgba(255,255,255,0);--elevation-layer1:rgba(255,255,255,.05);--elevation-layer2:rgba(255,255,255,.07);--elevation-layer3:rgba(255,255,255,.08);--elevation-layer4:rgba(255,255,255,.09);--elevation-layer5:rgba(255,255,255,.11);--elevation-layer6:rgba(255,255,255,.12);--elevation-layer7:rgba(255,255,255,.14);--elevation-layer8:rgba(255,255,255,.15);--elevation-layer9:rgba(255,255,255,.16);--elevation-layer10:rgba(255,255,255,.4);--elevation-layer0-dark:rgba(0, 0, 0,0);--elevation-layer1-dark:rgba(0, 0, 0,.05);--elevation-layer2-dark:rgba(0, 0, 0,.07);--elevation-layer3-dark:rgba(0, 0, 0,.08);--elevation-layer4-dark:rgba(0, 0, 0,.09);--elevation-layer5-dark:rgba(0, 0, 0,.11);--elevation-layer6-dark:rgba(0, 0, 0,.12);--elevation-layer7-dark:rgba(0, 0, 0,.14);--elevation-layer8-dark:rgba(0, 0, 0,.15);--elevation-layer9-dark:rgba(0, 0, 0,.16);--elevation-layer10-dark:rgba(0, 0, 0, .4);--elevation-layer11-dark:rgba(0, 0, 0, .6);--elevation-layer0-dark-solid:#121212;--elevation-layer1-dark-solid:#1D1D1D;--elevation-layer2-dark-solid:#212121;--elevation-layer3-dark-solid:#242424;--elevation-layer4-dark-solid:#272727;--elevation-layer5-dark-solid:#2C2C2C;--elevation-layer6-dark-solid:#2D2D2D;--elevation-layer7-dark-solid:#323232;--elevation-layer8-dark-solid:#353535;--elevation-layer9-dark-solid:#373737;--primary-color:#4ac694;--primary-color-dark-shade:#3B9E76;--primary-color-darker-shade:#338A67;--primary-color-darkest-shade:#25624A;--error-color:#BD362F;--warning-color:#FFECB5;--bs-body-bg:#1f2020;--body-text-color:#efefef;--btn-icon-filter:invert(1) grayscale(100%) brightness(200%);--primary-color-scrollbar:rgba(255,255,255,.3);--default-state-scrollbar:transparent;--text-muted-color:hsla(0,0%,100%,.45);--colorscape-enabled:true;--colorscape-primary-color:rgb(38, 38, 38);--colorscape-lighter-color:rgb(32, 32, 32);--colorscape-darker-color:rgb(28, 28, 28);--colorscape-complementary-color:rgb(51, 51, 51);--colorscape-primary-alpha-color:rgba(38, 38, 38, 0);--colorscape-lighter-alpha-color:rgba(32, 32, 32, 0);--colorscape-darker-alpha-color:rgba(28, 28, 28, 0);--colorscape-complementary-alpha-color:rgba(51, 51, 51, 0);--colorscape-primary-default-color:rgb(38, 38, 38);--colorscape-lighter-default-color:rgb(32, 32, 32);--colorscape-darker-default-color:rgb(28, 28, 28);--colorscape-complementary-default-color:rgb(51, 51, 51);--theme-color:#000000;--color-scheme:dark;--tile-color:var(--primary-color);--nav-offset:60px;--nav-mobile-offset:55px;--mobile-series-img-background:true;--setting-header-text-color:#d5d5d5;--setting-header-font-size:1.2rem;--setting-header-font-weight:bold;--setting-break-color:rgba(255, 255, 255, .2);--table-header-bg-color:rgba(0,0,0,.15);--table-header-text-color:hsla(0,0%,100%,.9);--table-body-bg-color:hsla(0,0%,100%,.02);--table-body-text-color:hsla(0,0%,100%,.85);--table-body-border:hidden;--table-body-striped-bg-color:var(--elevation-layer2);--navbar-bg-color:black;--navbar-text-color:white;--navbar-fa-icon-color:white;--navbar-border-radius:0px;--navbar-btn-hover-outline-color:rgba(255, 255, 255, 1);--navbar-header-margin:0px;--navbar-header-mobile-x-margin:0px;--navbar-header-mobile-y-margin:0px;--input-bg-color:#343a40;--input-bg-readonly-color:#434648;--input-focused-border-color:#ccc;--input-text-color:#fff;--input-placeholder-color:#aeaeae;--input-border-color:#ccc;--input-focus-boxshadow-color:rgb(255 255 255 / 50%);--btn-focus-boxshadow-color:rgb(255 255 255 / 50%);--btn-primary-text-color:white;--btn-primary-bg-color:var(--primary-color);--btn-primary-border-color:var(--primary-color);--btn-primary-hover-text-color:white;--btn-primary-hover-bg-color:var(--primary-color-darker-shade);--btn-primary-hover-border-color:var(--primary-color-darker-shade);--btn-primary-outline-text-color:white;--btn-primary-outline-bg-color:transparent;--btn-primary-outline-border-color:var(--primary-color);--btn-primary-outline-hover-text-color:white;--btn-primary-outline-hover-bg-color:var(--primary-color-darker-shade);--btn-primary-outline-hover-border-color:var(--primary-color-darker-shade);--btn-secondary-text-color:white;--btn-secondary-bg-color:#6c757d;--btn-secondary-border-color:#6c757d;--btn-secondary-hover-bg-color:var(--bs-btn-hover-bg);--btn-secondary-hover-border-color:var(--bs-btn-hover-border-color);--btn-secondary-font-weight:bold;--btn-secondary-outline-text-color:white;--btn-secondary-outline-bg-color:transparent;--btn-secondary-outline-border-color:transparent;--btn-secondary-outline-hover-bg-color:transparent;--btn-secondary-outline-hover-border-color:transparent;--btn-secondary-outline-font-weight:bold;--btn-primary-text-text-color:white;--btn-secondary-text-text-color:lightgrey;--btn-danger-text-text-color:var(--error-color);--btn-danger-outline-text-color:white;--btn-danger-outline-bg-color:transparent;--btn-danger-outline-border-color:var(--error-color);--btn-danger-outline-hover-text-color:white;--btn-danger-outline-hover-bg-color:var(--error-color);--btn-danger-outline-hover-border-color:var(--error-color);--btn-alt-bg-color:#424c72;--btn-alt-border-color:#444f75;--btn-alt-hover-bg-color:#3b4466;--btn-alt-focus-bg-color:#343c59;--btn-alt-focus-boxshadow-color:rgb(255 255 255 / 50%);--btn-fa-icon-color:white;--btn-disabled-bg-color:#343a40;--btn-disabled-text-color:white;--btn-disabled-border-color:#6c757d;--bs-btn-disabled-border-color:transparent;--btn-actions-border-radius:.375rem;--btn-actions-hover-bg:rgb(255 255 255 / 18%);--nav-item-min-width:150px;--nav-item-max-width:150px;--nav-tab-border-color:rgba(44, 118, 88, .7);--nav-tab-text-color:var(--elevation-layer10);--nav-tab-bg-color:transparent;--nav-tab-border-width:0 0 3px 0;--nav-tab-hover-border-color:var(--primary-color);--nav-tab-active-text-color:white;--nav-tab-border-hover-color:transparent;--nav-tab-hover-text-color:white;--nav-tab-hover-bg-color:transparent;--nav-tab-border-top:transparent;--nav-tab-border-left:transparent;--nav-tab-border-bottom:var(--primary-color);--nav-tab-border-right:transparent;--nav-tab-hover-border-top:transparent;--nav-tab-hover-border-left:transparent;--nav-tab-hover-border-bottom:var(--primary-color);--nav-tab-hover-border-right:transparent;--nav-tab-active-hover-bg-color:transparent;--nav-link-bg-color:var(--primary-color);--nav-link-active-text-color:white;--nav-link-text-color:var(--elevation-layer10);--modal-bg-color:#202122;--nav-header-text-color:white;--nav-header-bg-color:rgb(22, 27, 34);--toast-success-bg-color:rgba(59, 158, 118, .9);--toast-error-bg-color:#BD362F;--toast-info-bg-color:#2F96B4;--toast-warning-bg-color:#F89406;--alert-text-color:#fff3cd;--alert-bg-color:transparent;--checkbox-checked-bg-color:var(--primary-color);--checkbox-border-color:var(--input-focused-border-color);--checkbox-focus-border-color:var(--primary-color);--checkbox-focus-boxshadow-color:rgb(255 255 255 / 50%);--tagbadge-border-color:rgba(239, 239, 239, .125);--tagbadge-text-color:var(--body-text-color);--tagbadge-bg-color:var(--nav-tab-hover-bg-color);--tagbadge-filled-border-color:rgba(239, 239, 239, .125);--tagbadge-filled-text-color:var(--body-text-color);--tagbadge-filled-bg-color:var(--primary-color);--side-nav-width:230px;--side-nav-icon-size:.9rem;--side-nav-bg-color:var(--elevation-layer9-dark);--side-nav-mobile-bg-color:var(--elevation-layer2-dark-solid);--side-nav-openclose-transition:.15s ease-in-out;--side-nav-box-shadow:var(--elevation-layer0);--side-nav-mobile-box-shadow:3px 0em 5px 10em rgb(0 0 0 / 50%);--side-nav-hover-text-color:white;--side-nav-hover-bg-color:black;--side-nav-text-color:hsla(0,0%,100%,.85);--side-nav-border-radius:3px;--side-nav-border:none;--side-nav-border-closed:none;--side-nav-border-transition:.5s ease-in-out;--side-nav-companion-bar-transistion:.15s linear;--side-nav-bg-color-transition:.5s ease-in-out;--side-nav-closed-bg-color:transparent;--side-nav-item-active-color:var(--primary-color);--side-nav-item-active-text-color:#fff;--side-nav-active-bg-color:transparent;--side-nav-overlay-color:var(--elevation-layer11-dark);--side-nav-item-closed-color:var(--elevation-layer10);--side-nav-item-closed-hover-color:white;--list-group-item-text-color:var(--body-text-color);--list-group-item-bg-color:transparent;--search-list-group-item-bg-color:rgb(32, 38, 41);--list-group-hover-text-color:white;--list-group-hover-bg-color:rgb(22, 27, 34);--list-group-active-border-color:none;--list-group-item-border-top-left-radius:0px;--list-group-item-border-top-right-radius:0px;--list-group-item-border-bottom-left-radius:0px;--list-group-item-border-bottom-right-radius:0px;--list-group-item-border-width:1px 0 1px 0;--list-group-item-border-color:rgba(239, 239, 239, .125);--list-group-item-border-style:solid;--list-group-item-first-border-width:0px 0px 1px 0px;--list-group-item-last-border-width:0px 0px 0px 0px;--popover-body-bg-color:#2C2C2C;--popover-body-text-color:var(--navbar-text-color);--popover-outerarrow-color:transparent;--popover-arrow-color:transparent;--popover-bg-color:black;--popover-border-color:black;--pagination-active-link-border-color:var(--primary-color);--pagination-active-link-bg-color:var(--primary-color);--pagination-active-link-text-color:white;--pagination-link-border-color:rgba(239, 239, 239, .125);--pagination-link-text-color:white;--pagination-link-bg-color:rgba(1, 4, 9, .5);--pagination-focus-border-color:var(--primary-color);--pagination-link-hover-color:var(--primary-color);--progress-striped-animated-color:linear-gradient(45deg, rgba(74,198,148, .75) 25%, rgba(51, 138, 103, .75) 25%, rgba(51, 138, 103, .75) 50%, rgba(74,198,148, .75) 50%, rgba(74,198,148, .75) 75%, rgba(51, 138, 103, .75) 75%, rgba(51, 138, 103, .75));--progress-bg-color:var(--nav-header-bg-color);--progress-bar-color:var(--primary-color-dark-shade);--dropdown-item-hover-text-color:white;--dropdown-item-hover-bg-color:var(--primary-color-dark-shade);--dropdown-item-text-color:var(--navbar-text-color);--dropdown-item-bg-color:#2C2C2C;--dropdown-overlay-color:var(--elevation-layer1);--accordion-header-text-color:rgba(74, 198, 148, .9);--accordion-header-bg-color:rgba(52, 60, 70, .5);--accordion-body-bg-color:#292929;--accordion-body-border-color:rgba(239, 239, 239, .125);--accordion-body-text-color:var(--body-text-color);--accordion-header-collapsed-text-color:rgba(74, 198, 148, .9);--accordion-header-collapsed-bg-color:#292929;--accordion-button-focus-border-color:unset;--accordion-button-focus-box-shadow:unset;--accordion-active-body-bg-color:#292929;--accordion-body-box-shadow:none;--breadcrumb-bg-color:#292d32;--breadcrumb-item-text-color:var(--body-text-color);--ratingstar-color:white;--rating-star-color:var(--primary-color);--ratingstar-star-empty:#b0c4de;--ratingstar-star-filled:var(--primary-color);--hr-color:rgba(239, 239, 239, .125);--accent-bg-color:rgba(1, 4, 9, .5);--accent-text-color:lightgrey;--grid-breakpoints-xs:$grid-breakpoints-xs;--grid-breakpoints-sm:$grid-breakpoints-sm;--grid-breakpoints-md:$grid-breakpoints-md;--grid-breakpoints-lg:$grid-breakpoints-lg;--grid-breakpoints-xl:$grid-breakpoints-xl;--body-font-family:"EBGaramond", "Helvetica Neue", sans-serif;--brand-font-family:"Spartan", sans-serif;--html-font-size:16px;--card-bg-color:var(--elevation-layer3);--card-text-color:var(--body-text-color);--card-border-width:0 1px 1px 1px;--card-border-style:solid;--card-border-color:transparent;--card-border-radius:5px;--card-progress-bar-color:var(--primary-color);--card-overlay-bg-color:rgba(0, 0, 0, 0);--card-overlay-hover-bg-color:rgba(30,30,30,.6);--card-progress-triangle-size:28px;--slider-text-color:white;--input-range-color:var(--primary-color);--input-range-active-color:var(--primary-color-darker-shade);--manga-reader-overlay-filter:blur(10px);--manga-reader-overlay-bg-color:rgba(0,0,0,.5);--manga-reader-overlay-text-color:white;--manga-reader-next-highlight-bg-color:rgba(65, 225, 100, .5);--manga-reader-prev-highlight-bg-color:rgba(65, 105, 225, .5);--radio-accent-color:var(--primary-color);--radio-hover-accent-color:var(--primary-color);--radio-focus-boxshadow-color:rgb(255 255 255 / 50%);--carousel-header-text-color:var(--body-text-color);--carousel-header-text-decoration:none;--carousel-hover-header-text-decoration:none;--carousel-btn-color:var(--body-text-color);--drawer-bg-color:#292929;--drawer-text-color:white;--event-widget-bg-color:rgb(1, 4, 9);--event-widget-item-bg-color:rgb(1, 4, 9);--event-widget-text-color:var(--body-text-color);--event-widget-item-border-color:rgba(53, 53, 53, .5);--event-widget-border-color:rgba(1, 4, 9, .5);--event-widget-info-bg-color:#b6d4fe;--event-widget-error-bg-color:var(--error-color);--event-widget-update-bg-color:var(--primary-color);--event-widget-activity-bg-color:var(--primary-color);--search-result-text-lite-color:initial;--searchbar-bg-color:rgb(255 255 255 / 12%);--bulk-selection-text-color:var(--navbar-text-color);--bulk-selection-highlight-text-color:var(--primary-color);--bulk-selection-bg-color:black;--card-list-item-bg-color:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 1%, rgba(0,0,0,0) 100%);--review-card-star-color:gold;--review-spoiler-bg-color:var(--primary-color);--review-spoiler-text-color:var(--body-text-color);--badge-text-color:var(--bs-badge-color);--login-card-bg-color:#212121;--login-logo-image:url(/assets/images/logo.png);--login-logo-height:55px;--login-logo-width:55px;--login-logo-bg-size:contain;--login-logo-bg-repeat:no-repeat;--login-card-border-width:3px 0px 0px 0px;--login-card-border-style:solid;--login-card-border-color:var(--primary-color);--login-input-border-color:transparent;--login-input-border-color-focus:transparent;--login-input-box-shadow-focus:0 0 0 1px rgba(74, 198, 148, .8);--login-input-background-color:#353535;--login-input-color:#fff;--login-forgot-password-color:var(--primary-color);--login-background-url:url("./media/login-bg-3F52TUWZ.jpg");--login-background-size:cover;--login-background-opacity:.3;--login-background-color:#000;--login-input-font-family:"League Spartan", sans-serif;--login-input-placeholder-opacity:.5;--login-input-placeholder-color:#fff}:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#4ac694;--bs-danger:#BD362F;--bs-secondary:#6c757d;--bs-light:#f8f9fa;--bs-primary-rgb:74, 198, 148;--bs-danger-rgb:189, 54, 47;--bs-secondary-rgb:108, 117, 125;--bs-light-rgb:248, 249, 250;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, .75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, .5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13, 110, 253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10, 88, 202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm:0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width:.25rem;--bs-focus-ring-opacity:.25;--bs-focus-ring-color:rgba(13, 110, 253, .25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px}@property --color-1{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-2{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-3{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-4{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-5{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-6{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-7{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-8{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-9{syntax:"<color>";initial-value:transparent;inherits:true}@property --color-10{syntax:"<color>";initial-value:transparent;inherits:true}@property --color{syntax:"<color>";inherits:true}@property --chart-bg-color{syntax:"<color>";inherits:true}@property --aspect-ratio{syntax:"<ratio>";initial-value:auto;inherits:true}@property --labels-size{syntax:"<length>";initial-value:0;inherits:true}@property --labels-align-block{syntax:"<string>";inherits:true}@property --labels-align-inline{syntax:"<string>";inherits:true}@property --primary-axis-width{syntax:"<length>";initial-value:1px;inherits:true}@property --secondary-axes-width{syntax:"<length>";initial-value:1px;inherits:true}@property --data-axes-width{syntax:"<length>";initial-value:1px;inherits:true}@property --legend-border-width{syntax:"<length>";initial-value:1px;inherits:true}@property --primary-axis-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --secondary-axes-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --data-axes-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --legend-border-style{syntax:"<line-style>";initial-value:solid;inherits:true}@property --primary-axis-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --secondary-axes-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --data-axes-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --legend-border-color{syntax:"<color>";initial-value:transparent;inherits:true}@property --start{syntax:"<number>";inherits:true}@property --end{syntax:"<number>";inherits:true}@property --size{syntax:"<number>";inherits:true}@property --line-size{syntax:"<number>";inherits:true}:root{--select2-single-height:36px;--select2-multiple-height:36px;--select2-label-text-color:#000;--select2-required-color:red;--select2-selection-border-radius:4px;--select2-selection-background:var(--input-bg-readonly-color);--select2-selection-disabled-background:#eee;--select2-selection-border-color:var(--input-border-color);--select2-selection-focus-border-color:var(--input-focus-boxshadow-color);--select2-selection-text-color:var(--input-text-color);--select2-selection-choice-background:var(--tagbadge-filled-bg-color);--select2-selection-choice-text-color:var(--tagbadge-filled-text-color);--select2-selection-choice-border-color:var(--tagbadge-border-color);--select2-selection-choice-close-color:var(--tagbadge-filled-text-color);--select2-selection-choice-hover-close-color:var(--tagbadge-filled-text-color);--select2-placeholder-color:#999;--select2-placeholder-overflow:ellipsis;--select2-no-result-color:#888;--select2-no-result-font-style:italic;--select2-too-much-result-color:#888;--select2-too-much-result-style:italic;--select2-reset-color:#999;--select2-arrow-color:#ccc;--select2-dropdown-background:var(--input-bg-readonly-color);--select2-dropdown-border-color:var(--input-border-color);--select2-overlay-backdrop:transparent;--select2-search-border-color:var(--input-border-color);--select2-search-background:var(--input-bg-readonly-color);--select2-search-border-radius:0px;--select2-option-text-color:var(--body-text-color);--select2-option-disabled-text-color:#999;--select2-option-disabled-background:transparent;--select2-option-selected-text-color:lightgrey;--select2-option-selected-background:var(--btn-disabled-bg-color);--select2-option-highlighted-text-color:#fff;--select2-option-highlighted-background:#5897fb;--select2-option-group-text-color:var(--body-text-color);--select2-option-group-background:transparent;--select2-hint-text-color:#888}html{font-size:var(--html-font-size)}html,body{height:100%;overflow:hidden}body{margin:0;font-family:var(--body-font-family);color:var(--body-text-color);color-scheme:var(--color-scheme);max-height:100%;overflow-y:auto}@font-face{font-family:Spartan;src:url("./media/Spartan-VariableFont_wght-NM2LR5HQ.woff2") format("woff2");font-display:swap}@font-face{font-family:Poppins;src:url("./media/Poppins-SFWTNBQB.woff2") format("woff2");font-display:swap}@font-face{font-family:League Spartan;src:url("./media/LeagueSpartan-VariableFont_wght-2EBMJPE4.ttf");font-display:swap}app-root{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3)}body{font-family:Poppins,sans-serif;overflow:hidden;scrollbar-color:rgba(255,255,255,.3) rgba(0,0,0,.1);scrollbar-width:thin;padding:0;margin:0}:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url("./media/fa-brands-400-MDS4TU4L.woff2") format("woff2"),url("./media/fa-brands-400-CNBICIQT.ttf") format("truetype")}:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url("./media/fa-regular-400-N56QV3DR.woff2") format("woff2"),url("./media/fa-regular-400-2FI4ICQD.ttf") format("truetype")}:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url("./media/fa-solid-900-Z3HFQTXF.woff2") format("woff2"),url("./media/fa-solid-900-XVWCCN5V.ttf") format("truetype")}</style><link rel="stylesheet" href="styles-OSMUEMQ3.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-OSMUEMQ3.css"></noscript></head>
<body class="mat-typography default" theme="dark">
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
<link rel="modulepreload" href="chunk-MFNSJITH.js"><link rel="modulepreload" href="chunk-VIBKPRU6.js"><link rel="modulepreload" href="chunk-BXJYX7MP.js"><link rel="modulepreload" href="chunk-E7ZRNGXF.js"><link rel="modulepreload" href="chunk-K3WBUCUC.js"><link rel="modulepreload" href="chunk-AF43YU3D.js"><link rel="modulepreload" href="chunk-ZP7F2M2I.js"><link rel="modulepreload" href="chunk-HCPIVMPE.js"><link rel="modulepreload" href="chunk-DNPS474R.js"><link rel="modulepreload" href="chunk-7NMVE5II.js"><script src="polyfills-KSD5EUEV.js" type="module"></script><script src="main-GA3JORTM.js" type="module"></script></body>
</html>

Now, in the HTML output you have two things you need to notice:

...
<base href="/">
...
<link rel="modulepreload" href="chunk-MFNSJITH.js">
...

That tells your browser, to request:

https://shardbearer.banteng-gopher.ts.net/chunk-MFNSJITH.js

instead of:

https://shardbearer.banteng-gopher.ts.net/kavita/chunk-MFNSJITH.js

So, your traffic for that JavaScript file goes to:

100.93.230.123:3000

rather than to:

100.93.230.123:5000

and the service you’re running on port 3000 is confused about what you’re asking from it. It has no idea about the file chunk-MFNSJITH.js and it most likely returns HTTP 404 Not Found with a content type text/html, which your browser then throws away.

You can try to run these two commands to confirm:

curl -v https://shardbearer.banteng-gopher.ts.net/chunk-MFNSJITH.js

curl -v https://shardbearer.banteng-gopher.ts.net/kavita/chunk-MFNSJITH.js

The first one is what the HTML code in your /kavita page is forcing your browser to request. The second one is what it should be requesting instead.

A quick-n-dirty fix would be removing this line from your HTML code:

<base href="/">

but I’m assuming that’s there for another reason.

2 Likes

Just wanted to add that in the example you linked, they host Kavita on its own subdomain:

{
       email youremail@here.com
       admin off
}
kavita.yourdomain.com {
       encode gzip
       tls youremail@here.com
       reverse_proxy * localhost:5000 192.168.0.1:5000  {
           header_up X-Forwarded-Host {host}:5000
           header_up -Origin
           header_up -Referer
       }
}

Such setup works correctly with the base HTML tag:

<base href="/">

What you’re doing is subdirectory hosting, which some web apps don’t handle well.

There are potential issues with subdirectory hosting.

2 Likes

Are you sure? Because our packaging gives the latest version, i.e. v2.9.1. The package that installs 2.6.2 is Debian’s own packaging, which we don’t endorse.

Is that not what the handle_path is supposed to help resolve? It strips any suffix away and tells the app it’s /.

Caddy never even sees a request for

https://shardbearer.banteng-gopher.ts.net/kavita/chunk-MFNSJITH.js

This:

...
<base href="/">
...
<link rel="modulepreload" href="chunk-MFNSJITH.js">
...

makes your browser always ask for

https://shardbearer.banteng-gopher.ts.net/chunk-MFNSJITH.js

When it reaches Caddy, it’s already

https://shardbearer.banteng-gopher.ts.net/chunk-MFNSJITH.js
1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.