bracket icon indicating copy to clipboard operation
bracket copied to clipboard

Traefik and Cors Headers issue

Open captain-joni opened this issue 9 months ago • 3 comments

I have read every Issue on the Topic of Cors Headers, but still no luck, i tried every compination and every tipp that i saw, but my configuration with Traefik as a Reverse Proxy just wont work. Maybe you can Help me out here.

First i want to ask if it is right that the error, that i can see in the Browser window when tryind to login, is normal: Request URL: http://localhost:8400/token Referrer Policy: strict-origin-when-cross-origin Cuz in my understanding it should read the Domain i registered as my api domin, eg. "api-bracket.mydomain.com".

Also i want to recon, that the things i woud need to fix, are not consistent throuout the docs, faq etc. e.g. the #CORS_ORIGIN_REGEX: https://.*.vercel.app ist somewhere written as mandatory but in every other example i couldnt find it.

After all, here my Docker compose File:

networks:
  bracket_lan:
    #internal: true
    driver: bridge
  proxy:
    external: true

#volumes:
#  bracket_pg_data:

services:
  bracket-backend:
    container_name: bracket-backend
    depends_on:
      - postgres
    environment:
      ENVIRONMENT: "PRODUCTION"
      #CORS_ORIGINS: http://localhost:3000
      #CORS_ORIGINS: http://172.19.0.20:3000
      CORS_ORIGINS: https://turnier.mydomain.de
      #CORS_ORIGIN_REGEX: https://.*\.vercel\.app
      BASE_URL: https://turnier-api.mydomain.de
      ADMIN_EMAIL: mymail
      ADMIN_PASSWORD: testpasswort
      ALLOW_INSECURE_HTTP_SSO: false
      JWT_SECRET: 1ab73c3c1a0043c9f2354b57celknkn0c79d97c6bf2819c4aa54fc217740c7a9
      PG_DSN: postgresql://bracket_dev:bracket_dev@postgres:5432/bracket_dev
    image: ghcr.io/evroon/bracket-backend
    networks:
      - bracket_lan
      - proxy 
    labels: 
      - "traefik.enable=true"
      - "traefik.http.routers.bracket-api.entrypoints=http"
      - "traefik.http.routers.bracket-api.rule=Host(`turnier-api.mydomain.de`)"    ##eure domain
      - "traefik.http.routers.bracket-api.middlewares=redirect@file"
      - "traefik.http.routers.bracket-api-secure.rule=Host(`turnier-api.mydomain.de`)"    ##eure domain
      - "traefik.http.routers.bracket-api-secure.entrypoints=https"
      - "traefik.http.routers.bracket-api-secure.tls=true"
      - "traefik.http.routers.bracket-api-secure.tls.certresolver=mytlschallenge"
      - "traefik.http.routers.bracket-api-secure.service=bracket-api"
      - "traefik.http.services.bracket-api.loadbalancer.server.port=8400"
      - "traefik.docker.network=proxy"
      - "traefik.http.middlewares.testheader.headers.accesscontrolallowmethods=GET,OPTIONS,PUT"
      - "traefik.http.middlewares.testheader.headers.accesscontrolallowheaders=*"
      - "traefik.http.middlewares.testheader.headers.accesscontrolalloworiginlist=https://turnier-api.mydomin.de,https://turnier.mydomin.de"
      - "traefik.http.middlewares.testheader.headers.accesscontrolmaxage=100"
      - "traefik.http.middlewares.testheader.headers.addvaryheader=true"
      
    #ports:
      #- 8400:8400
    restart: unless-stopped
    volumes:
     
      - /opt/nfs/bracket/backend/static:/app/static

  bracket-frontend:
    container_name: bracket-frontend
    environment:
      ENVIRONMENT: "PRODUCTION"
      NEXT_PUBLIC_API_BASE_URL: "https://turnier-api.mydomain.de"
      #NEXT_PUBLIC_HCAPTCHA_SITE_KEY: 10000000-ffff-ffff-ffff-000000000001
    image: ghcr.io/evroon/bracket-frontend
    networks:
      - proxy
      - bracket_lan
    #ports:
     # - 3000:3000
    restart: unless-stopped
    labels: 
      - "traefik.enable=true"
      - "traefik.http.routers.bracket.entrypoints=http"
      - "traefik.http.routers.bracket.rule=Host(`turnier.mydomain.de`)"    ##eure domain
      - "traefik.http.routers.bracket.middlewares=redirect@file"
      - "traefik.http.routers.bracket-secure.rule=Host(`turnier.mydomain.de`)"    ##eure domain
      - "traefik.http.routers.bracket-secure.entrypoints=https"
      - "traefik.http.routers.bracket-secure.tls=true"
      - "traefik.http.routers.bracket-secure.tls.certresolver=mytlschallenge"
      - "traefik.http.routers.bracket-secure.service=bracket"
      - "traefik.http.services.bracket.loadbalancer.server.port=3000"
      - "traefik.docker.network=proxy"
      - "traefik.http.middlewares.testheader.headers.accesscontrolallowmethods=GET,OPTIONS,PUT"
      - "traefik.http.middlewares.testheader.headers.accesscontrolallowheaders=*"
      - "traefik.http.middlewares.testheader.headers.accesscontrolalloworiginlist=https://turnier-api.mydomain.de,https://turnier.mydomain.de"
      - "traefik.http.middlewares.testheader.headers.accesscontrolmaxage=100"
      - "traefik.http.middlewares.testheader.headers.addvaryheader=true"

  postgres:
    environment:
      POSTGRES_DB: bracket_dev
      POSTGRES_PASSWORD: bracket_dev
      POSTGRES_USER: bracket_dev
    image: postgres
    networks:
      - bracket_lan
    restart: always
    volumes:
      - /opt/nfs/bracket/bracket_pg_data:/var/lib/postgresql/data


captain-joni avatar Mar 19 '25 17:03 captain-joni

Yes cors issues are annoying.

First i want to ask if it is right that the error, that i can see in the Browser window when tryind to login, is normal: Request URL: http://localhost:8400/token Referrer Policy: strict-origin-when-cross-origin Cuz in my understanding it should read the Domain i registered as my api domin, eg. "api-bracket.mydomain.com".

Hmm you should be able to visit api-bracket.mydomain.com right in the browser? In any case, CORS_ORIGINS should be the same domain as whatever (base) url you open in the browser. So what happens when you visit api-bracket.mydomain.com?

evroon avatar Mar 19 '25 18:03 evroon

the Base Domain (mydomain.com) is the same, just different Subdomains, pointing to the same server, where traefik handles the request based on the url. When i visit turnier-api.mydomain.com ( my version of : api-bracket.mydomain.com) i see: {"detail":"Not Found"}

So the server is kind of reachable, because i dont get an 404 page.

Edit: i saw that the frontend uses the path /token, so i tried reaching turnier-api.mydomain.com/token and got:

{"detail":"Method Not Allowed"}

So its again an Cors issue i guess.

Another Question, why does the Backend has the Volume Static mounted? should there be any files in there, neither in my server nor in ur github are there any relevant files, so why mount this?

EDIT: I finally got it to work, i build the docker images instead using yours, and set the NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER to my Api Domain direktly in the Dockerfile, this way i can finaly login.

captain-joni avatar Mar 19 '25 20:03 captain-joni

Im experiencing this same thing on NPM.

bleeblonks avatar Jun 11 '25 22:06 bleeblonks