No js or css when reverse proxying over nginx in docker

[lizardperson]

I’m trying to make the GUI accessible over https://sub.example.com/syncthing. Visiting the URL just ends up in missing Javascript and CSS.

Please help, I have been trying to solve this for a few days, no idea why it doesn’t work… I can access the interface with https://example.com:8384 just fine.

Examples of what the Firefox console says:

The script from “https://sub.example.com/vendor/fancytree/jquery.fancytree-all-deps.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

and

Loading failed for the <script> with source “https://sub.example.com/vendor/angular/angular.js”.

Curling either of them returns 404 Not Found. Here is my nginx site config:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name sub.example.com;
    set $base /var/www;

    # SSL
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem;

    # reverse proxy
    location /syncthing {
        root $base/syncthing;

        proxy_set_header        Host $host;
        proxy_set_header        Referer  https://syncthing:8384;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Forwarded-Proto $scheme;

        proxy_pass https://syncthing:8384/;

        proxy_read_timeout      600s;
        proxy_send_timeout      600s;
    }

    # additional config
    include nginxconfig.io/general.conf;
}

# HTTP redirect
server {
    listen 80;
    listen [::]:80;

    server_name sub.example.com;

    include nginxconfig.io/letsencrypt.conf;

    location / {
        return 301 https://sub.example.com$request_uri;
    }
}

docker-compose.yml:

version: '3'

services:

  nginx:
    image: nginx:latest
    container_name: nginx-0
    networks:
      - web
    ports:
      - "80:80"
      - "443:443"
    restart: always
    volumes:
      - ./www:/var/www
      - ./syncthing/config:/var/www/shh/syncthing
      - ./nginx/:/etc/nginx
      - ./nginx/log:/var/log/nginx
      - ./letsencrypt:/etc/letsencrypt
      - /etc/localtime:/etc/localtime:ro
      - /var/run/docker.sock:/tmp/docker.sock:ro
    command: "/bin/sh -c 'while :; do sleep 6h & wait ${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"

  syncthing:
    image: linuxserver/syncthing
    container_name: syncthing-0
    networks:
      - web
      - st
    ports:
       #webUI 
      - 8384:8384
       #listening  
      - 22000:22000
       #port discovery
      - 21027:21027/udp
    restart: always
    volumes:
      - ./syncthing/config:/config
      - ./syncthing/data:/data
    environment:
      - TZ=CET
      - UMASK_SET=<022>
      - PUID=1002
      - PGID=999

networks:
  web:
  st:

As for the rest of my config (specifically nginx.conf, and nginxconfig.io/general.conf), you can look here

[wweich]

All URLs in Syncthing are relative, so https://sub.example.com/syncthing doesn’t work, but https://sub.example.com/syncthing/ should.

That’s at least how it is with my apache based reverse proxy.

[lizardperson]

I changed location /syncthing to location /syncthing/. It has the right URLs for the assets now, however they return 403 Forbidden now.

The script from “https://sub.example.com/syncthing/vendor/angular/angular.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.