Traefik and Cors Headers issue
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
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?
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.
Im experiencing this same thing on NPM.