CORS is not working with Traefik

Traefik Traefik v3 (latest)
,
1

I'm using Traefik as a reverse-proxy for TLS which is working fine though curl requests, although the browser (Firefox) is disallowing access because The Same Origin Policy disallows reading the remote resource

The docker setup works without Traefik, and I've followed mostly all the guides/advice I could find about setting up CORS middleware but seem to have hit a dead end. Any advice would be appreciated!

Output of a curl request


$ curl -I -X OPTIONS http://example.com \
  -H "Origin: http://example.com \
  -H "Access-Control-Request-Method: GET" \
  -H "Access-Control-Request-Headers: Content-Type, Authorization"
HTTP/1.1 200 OK
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 100
Date: Wed, 08 Jan 2025 18:24:20 GMT
Content-Length: 0

docker-compose.yml

version: "3.8"
services:
  api:
    hostname: api
    build:
      context: ./api
      dockerfile: api.Dockerfile
    ports:
      - "5000:5000"
    restart: always
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"
    labels:
      - "traefik.enable=true"
      - "traefik.http.middlewares.cors.headers.accessControlAllowMethods=*"
      - "traefik.http.middlewares.cors.headers.accessControlAllowOriginList=*"
      - "traefik.http.middlewares.cors.headers.allowedHosts=*"
      - "traefik.http.middlewares.cors.headers.accessControlAllowHeaders=*"
      - "traefik.http.middlewares.cors.headers.accessControlMaxAge=100"
      - "traefik.http.middlewares.cors.headers.addVaryHeader=true"

      - "traefik.http.routers.web.rule=Host(`example.com`)"
      - "traefik.http.routers.web.middlewares=cors"

      - "traefik.http.routers.websecure.rule=Host(`example.com`)"
      - "traefik.http.routers.websecure.middlewares=cors"
      - "traefik.http.routers.websecure.tls=true"
      - "traefik.http.routers.websecure.tls.certresolver=letsencrypt"

  traefik:
    image: "traefik:v3.3"
    container_name: "traefik"
    command:
      - "--api.insecure=true"
      - "--api.dashboard=false"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entryPoints.web.address=:80"
      - "--entryPoints.websecure.address=:443"
      - "--certificatesresolvers.letsencrypt.acme.tlschallenge=true"
      - "--certificatesresolvers.letsencrypt.acme.email=user@example.com"
      - "--certificatesresolvers.letsencrypt.acme.storage=/letsencrypt/acme.json"
    ports:
      - "443:443"
      - "80:80"
    volumes:
      - "./letsencrypt:/letsencrypt"
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
2

Maybe check the Traefik headers middleware doc again, this works for us:

      - traefik.http.middlewares.cors.headers.customresponseheaders.Access-Control-Allow-Origin=*
      - traefik.http.middlewares.cors.headers.customresponseheaders.Access-Control-Allow-Methods=GET,POST,OPTIONS
      - traefik.http.middlewares.cors.headers.customresponseheaders.Access-Control-Allow-Headers=*
3

Thanks very much @bluepuma77! That worked a charm.

In case anyone else finds it useful, this is what the functional labels: section looks like.

    labels:
      - "traefik.enable=true"
      - "traefik.http.middlewares.cors.headers.customresponseheaders.Access-Control-Allow-Origin=*"
      - "traefik.http.middlewares.cors.headers.customresponseheaders.Access-Control-Allow-Methods=*"
      - "traefik.http.middlewares.cors.headers.customresponseheaders.Access-Control-Allow-Headers=*"

      - "traefik.http.routers.web.rule=Host(`example.com`)"
      - "traefik.http.routers.web.middlewares=cors"

      - "traefik.http.routers.websecure.rule=Host(`example.com`)"
      - "traefik.http.routers.websecure.middlewares=cors"
      - "traefik.http.routers.websecure.tls=true"
      - "traefik.http.routers.websecure.tls.certresolver=letsencrypt"
4

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