how to avoid cors errors with nginx proxy in a docker container

i have a docker compose file which creates a bunch of containers which provide different web services. they all run on port 8080. so my idea was to put them all into one network and use an nginx proxy as a container to make all the services with different endpoints available to the host.

this is an example of how the compose file looks:

services:

  xplan-manager-api:
    image: registry.opencode.de/diplanung/ozgxplanung/xplanbox/xplan-manager-api
    networks:
      - xplan-net
    env_file:
      - ./.env
        
  xplan-manager-web:
    image: registry.opencode.de/diplanung/ozgxplanung/xplanbox/xplan-manager-web
    networks:
      - xplan-net
    env_file:
      - ./.env

  xplan-nginx:
    build:
      context: ./nginx
    ports:
      - "8080:80"
    networks:
      - xplan-net

networks:
  xplan-net:
    driver: bridge

volumes:
  pgdata:
  minio_data:

the nginx container has a docker file:

FROM nginx:latest

COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

and a default.conf and nginx.conf

the default looks a bit like this:

server {
    listen 80;  


    # Health check endpoint
    location /health {
        return 200;
        access_log off;
    }

    location /xplan-manager-api {
        proxy_pass http://xplan-manager-api:8080;
        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;
        proxy_intercept_errors off;
        try_files $uri @xplanmanagerapiproxy;
    }
    location @xplanmanagerapiproxy {
        proxy_pass http://xplan-manager-api:8080;
        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;
    }

    location /xplan-manager-web {
        proxy_pass http://xplan-manager-web:8080;
        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;
        proxy_intercept_errors off;
        try_files $uri @xplanmanagerwebproxy;
    }
    location @xplanmanagerwebproxy {
        proxy_pass http://xplan-manager-web:8080;
        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;
    }
}

it does work like it should - so i can open localhost:8080/xplan-manager-web and it gets internally redirected to the correct service.

the issue i am having now is, that i run into cors errors, when i am trying to reach the api for example from a third website. (so for example a fetch on a third site.

what i did try is to add this to the /xplan-manager-api:

    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE" always;
    add_header Access-Control-Allow-Headers * always;
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range" always;
    add_header Content-Security-Policy "default-src '*';";
    add_header Content-Security-Policy "connect-src '*';";

    # Handle preflight requests
    if ($request_method = 'OPTIONS') {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
        add_header Access-Control-Allow-Headers *;
        add_header Content-Security-Policy "default-src '*';";
        add_header Content-Security-Policy "connect-src '*';";
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        return 204;
    }

with the result that the nginx container would not even start anymore.

what is the correct way to get rid of the cors errors here?

Thanks a lot!!