Routing directive, Reverse Proxy assets got 400

[izulwahidin]

1. Caddy version (caddy version):

v2.4.6

2. How I run Caddy:

i ran it via docker using official caddy image

a. System environment:

Official Docker Image

b. Command:

docker-compose up

c. Service/unit/compose file:

version: '3.9'

services:
 file:
  image: maxime1907/filegator
  restart: always
  ports:
   - 2222:80
   - 2233:443
  volumes:
   - $PWD/web:/data
  environment:
   PUID: 33
   GUID: 33

 php:
  build: .
  restart: always
  volumes:
   - $PWD/web:/app/public
   - $PWD/php.ini:/usr/local/etc/php/php.ini

 caddy:
  image: caddy
  restart: always
  ports:
   - 80:80
   - 443:443
  volumes:
   - $PWD/Caddyfile:/etc/caddy/Caddyfile
   - $PWD/web:/app/public
  depends_on:
   - db
   - php
   - file

d. My complete Caddyfile or JSON config:

{
  http_port 80
  https_port 443
}

localhost {
    handle_errors {
        respond "{http.error.status_code} {http.error.status_text}"
    }

    redir /filegator /filegator/ permanent
    route /filegator/* {
        uri strip_prefix /filegator/
        reverse_proxy * 172.18.0.1:2233
    }

    root * /app/public/
    encode gzip
    php_fastcgi php:9000
    file_server
}

3. The problem I’m having:

so i have filegator on port 2222 for http and 2233 for https and it works fine when i access these ports.
But when i want to to reverse proxy port 2233 to subdir https://localhost/filegator it returned status 400 check screenshot bellow
Here are some Header Detal from [curl --head]:
localhost:2222 (http)

HTTP/1.1 200 OK
Server: nginx/1.18.0
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
X-Powered-By: PHP/7.3.32
Set-Cookie: filegator=mg40jq7c9e43kguhmdh6tl9ode; path=/; HttpOnly; SameSite=Lax
Cache-Control: no-cache, private
Date: Mon, 13 Jun 2022 08:19:04 GMT
X-CSRF-Token: awKSb4hb3iW4YTktHbsmpSsQSbsohfj3nT6d7IPT2P8
X-Frame-Options: sameorigin
Content-Security-Policy: frame-ancestors 'self'

localhost:2222 (https)

curl: (35) error:1408F10B:SSL routines:ssl3_get_record:wrong version number

localhost:2233 (http)

HTTP/1.1 400 Bad Request
Server: nginx/1.18.0
Date: Mon, 13 Jun 2022 08:21:18 GMT
Content-Type: text/html
Content-Length: 255
Connection: close

localhost:2233 (https)

HTTP/1.1 200 OK
Server: nginx/1.18.0
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
X-Powered-By: PHP/7.3.32
Set-Cookie: filegator=pikhmpk40bbv0dj6fq50nvmk31; path=/; HttpOnly; SameSite=Lax
Cache-Control: no-cache, private
Date: Mon, 13 Jun 2022 08:21:39 GMT
X-CSRF-Token: qw0O6gExfusDP4kw_1fVefsfi5ofijVXzfRXwMl9J6E
X-Frame-Options: sameorigin
Content-Security-Policy: frame-ancestors 'self'

and last this is the screenshot when i try to access https://localhost/filegator/

4. Error messages and/or full log output:

5. What I already tried:

to be honest, nothing at all. idk anything about this

6. Links to relevant resources:

[francislavoie]

You need to proxy to the port the service uses inside the docker network, not the one you bound to the host machine.

@izulwahidin

  ports:
   - 2222:80
   - 2233:443

Remove these lines, you don’t need to bind this server’s ports to the host if you’re proxying to it with Caddy.

Then in Caddy, do reverse_proxy file:80 (since your container is named file, and it seems to listen on port 80).

@izulwahidin

  volumes:
   - $PWD/Caddyfile:/etc/caddy/Caddyfile
   - $PWD/web:/app/public

Please make sure you persist /data, otherwise you’ll lose Caddy’s certs and keys every time you tear down and restart the container, which can make you hit rate limits, and it’s just wasteful in general.

@izulwahidin

{
  http_port 80
  https_port 443
}

Remove these global options, they’re redundant. Those are already the default HTTP and HTTPS ports.

@izulwahidin

    route /filegator/* {
        uri strip_prefix /filegator/
        reverse_proxy * 172.18.0.1:2233
    }

You can use handle_path instead, which will do the strip_prefix logic for you implicitly.

handle_path /filegator/* {
	reverse_proxy file:80
}

But keep in mind, when proxying a subpath to an upstream app, you can run into trouble if the upstream app isn’t configured to know that it’s supposed to run under a particular path. This article explains:

The "subfolder problem", OR, "why can't I reverse proxy my app into a subfolder?"

Have you ever tried to reverse proxy an app into its own little subfolder of your domain name? Makes things neat, doesn’t it? Using example.com/foo/ for one app, example.com/bar/ for another. If you’re coming here from one of the selfhosted communities, you might be thinking along the lines of example.com/sonarr/, example.com/radarr/ etc. Chances are, you’ve tried some configuration along these lines: example.com { redir /sonarr /sonarr/ handle_path /sonarr/* { reverse_proxy localhost…

Also, I’d suggest to wrap your other part, your PHP app, in a handle so that it’s properly mutually exclusive with your proxy. So altogether:

localhost {
	handle_errors {
		respond "{http.error.status_code} {http.error.status_text}"
	}

	encode gzip

	redir /filegator /filegator/ permanent
	handle_path /filegator/* {
		reverse_proxy file:80
	}

	handle {
		root * /app/public/
		php_fastcgi php:9000
		file_server
	}
}