Caddy v2 upgrade 502 erro (maybe cors related)

[eraldo (Eraldo Energy)]

1. Caddy version (caddy version):

2.4.3

2. How I run Caddy:

I am running caddy it in a docker container locally.
Domain name: localhost.

a. System environment:

macOS Big Sur 11.4
Docker Desktop 3.5.2 (66501)

b. Command:

docker-compose -f local.yml build caddy
docker-compose -f local.yml up caddy

c. Service/unit/compose file:

services:

  caddy:
    build:
      context: .
      dockerfile: ./compose/local/caddy/Dockerfile
    image: coapp_local_caddy
    container_name: caddy
    depends_on:
      - django
    volumes:
      - local_caddy:/root/.caddy
    env_file:
      - ./.envs/.local/.caddy
    ports:
      - "80:80"
      - "443:443"
...

d. My complete Caddyfile or JSON config:

{
	auto_https off
}

http://www.{$DOMAIN_NAME:localhost} {
    redir http://{$DOMAIN_NAME}{uri}
}

http://api.{$DOMAIN_NAME:localhost} {
    reverse_proxy django:5000
    log {
      output stdout
    }
    encode gzip
}

http://{$DOMAIN_NAME:localhost} {
    reverse_proxy /api/* /static/* /media/* /backend/* django:5000
    reverse_proxy localhost:4200
    log {
      output stdout
    }
    encode gzip
    file_server
}

3. The problem I’m having:

Trying to refresh the page. (or navigate in an incognito tab)
I would expect to see my frontend or backend.

Browser feedback:

This page isn’t working
localhost is currently unable to handle this request.
HTTP ERROR 502

4. Error messages and/or full log output:

caddy           | {"level":"error","ts":1626189992.2242079,"logger":"http.log.error.log1","msg":"dial tcp 127.0.0.1:4200: connect: connection refused","request":{"remote_addr":"172.18.0.1:55914","proto":"HTTP/1.1","method":"GET","host":"localhost","uri":"/favicon.ico","headers":{"User-Agent":["Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"],"Sec-Fetch-Site":["same-origin"],"Referer":["http://localhost/api/graphql"],"Sec-Fetch-Dest":["image"],"Accept":["image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8"],"Sec-Fetch-Mode":["no-cors"],"Accept-Encoding":["gzip, deflate, br"],"Cookie":["_ga=GA1.1.523929168.XXXXXX; Pycharm-547c563a=XXXXXX; csrftoken=XXXXXX; sessionid=XXXXXX; _ga_XXXXXX=XXXXXX.0"],"Cache-Control":["no-cache"],"Sec-Ch-Ua":["\" Not;A Brand\";v=\"99\", \"Google Chrome\";v=\"91\", \"Chromium\";v=\"91\""],"Sec-Ch-Ua-Mobile":["?0"],"Accept-Language":["en-US,en;q=0.9,de-AT;q=0.8,de;q=0.7"],"Connection":["keep-alive"],"Pragma":["no-cache"]}},"duration":0.0011411,"status":502,"err_id":"ke4dt7jt5","err_trace":"reverseproxy.statusError (reverseproxy.go:857)"}

5. What I already tried:

Pointing my broswer to different urls:

http://localhost/api
http://localhost:5000/api
http://localhost:4200/
http://localhost:4200/test
http://localhost/
http://localhost/test

=> Same. Same.

[francislavoie]

@eraldo

reverse_proxy /api/* /static/* /media/* /backend/* django:5000

That’s invalid syntax. If you need to match multiple paths, you must use a named matcher:

Request matchers (Caddyfile) - Caddy Documentation

@eraldo

    volumes:
      - local_caddy:/root/.caddy

This volume path is incorrect. Please review the docs on Docker

@eraldo

reverse_proxy localhost:4200

localhost inside of a Docker container refers to the same container itself. If you only have Caddy running in that container (which should be the case, keep your services in separate containers) then that won’t work. Use the service name of your other container instead.

@eraldo

Trying to refresh the page. (or navigate in an incognito tab)

Use curl -v when testing HTTP requests. Browsers all behave differently in subtle ways. curl will show you proper logs as to what’s going on, and gives consistent results.