Problems with CORS and Reverse Proxy

[mfbehrens]

Hello,

sorry for making this post, but I spend a full day trying to fix this issue and I have no idea left how to fix it.

I am trying to run martin to server tiles for maputnik on my local device in podman containers. This is my compose:

services:
  postgis:
    image: postgis/postgis:latest
    # container_name: postgis-db
    env_file:
      - .env
    ports:
      - "${POSTGRES_PORT}:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data
    networks:
      - db_network
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB} -p ${POSTGRES_PORT}"]
      interval: 30s
      timeout: 10s
      retries: 5

  martin:
    image: ghcr.io/maplibre/martin
    restart: unless-stopped
    ports:
      - 3000:3000
    env_file:
      - .env
    depends_on:
      - postgis
    volumes:
      - ./martin.yaml:/config/martin.yaml:ro
    networks:
      - db_network
      - tile_server_network
    command: ["--config", "/config/martin.yaml"]

  nginx:
    image: nginx:alpine
    depends_on:
      - martin
    ports:
      - "8080:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    networks:
      - tile_server_network

  maputnik:
    image: ghcr.io/maplibre/maputnik:main
    restart: unless-stopped
    ports:
      - 8888:80
    # volumes:
    #   - ./style.json:/data/style.json
    depends_on:
      - martin
      - nginx
    networks:
      - tile_server_network

volumes:
  pgdata:

networks:
  db_network:
  tile_server_network:

Since martin does not support CORS headers, I figured out that it is not possible to just access the tiles from maputnik by setting the address to http://martin:3000/catalog. I think this would be very cool (even if only relevant for testing purposes).

Next I added the nginx server as a reverse proxy:

events {}

http {
    server {
        listen 80;
        
        location / {
            proxy_pass http://martin:3000;
            proxy_set_header Host $host;
            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;

            # CORS headers
            add_header 'Access-Control-Allow-Origin' '*';
            # add_header 'access-control-allow-origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET';
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
            
            if ($request_method = 'OPTIONS') {
                return 204;
            }
        }
    }
}

Very basic config to set the Access-Control-Allow-Origin to *.

When I query the server from the terminal, everything seems to be fine:

curl -v http://localhost:8080/catalog
* Host localhost:8080 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:8080...
* Connected to localhost (::1) port 8080
* using HTTP/1.x
> GET /catalog HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/8.10.1
> Accept: */*
> 
* Request completely sent off
< HTTP/1.1 200 OK
< Server: nginx/1.27.2
< Date: Tue, 29 Oct 2024 01:31:18 GMT
< Content-Type: application/json
< Content-Length: 227
< Connection: keep-alive
< vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET
< Access-Control-Allow-Headers: Authorization, Content-Type
< 
* Connection #0 to host localhost left intact
{"tiles":{"building":{"content_type":"application/x-protobuf","description":"public.building.geom"},"landmark_point":{"content_type":"application/x-protobuf","description":"public.landmark_point.geom"}},"sprites":{},"fonts":{}}

However, when I use it from the browser I get this header (notice the double Access-Control-Allow-Origin, does not matter if i write it with capital letter or not):

HTTP/1.1 200 OK
Server: nginx/1.27.2
Date: Tue, 29 Oct 2024 01:33:09 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
vary: accept-encoding, Origin, Access-Control-Request-Method, Access-Control-Request-Headers
access-control-allow-origin: http://localhost:8888
content-encoding: br
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Authorization, Content-Type

and this

Can anybody help me with these issues?
Thank you and sorry for all this text and logs.
Please tell me if I am doing something wrong in general with my setup.

[CommanderStorm]

just a hunch (and simple to try out => lets try this first)
Could you try the following

- add_header 'Access-Control-Allow-Methods' 'GET';
- add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
+ add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
+ add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Keep-Alive,If-Modified-Since,Cache-Control,ETag';

the cors caching from https://serverfault.com/a/716283 might also be helpfull.

[mfbehrens]

Thank you. That was indeed my error!