maplibregl in Angular gets CORS error behind NGINX proxy

Question

My question is about how to configure Angular to allow maplibregl to work behind an NGINX proxy used for local development.

This is my proxy to the Angular development server and the local API.

http {
    server {
        listen 80 default_server;
        root /angular;

        location / {
            proxy_pass http://app:4200;

            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;

            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
        }

        location /api {
            proxy_pass http://web:80;
        }
    }
}

Angular runs inside of a Docker container using this command:

CMD ng serve --proxy-config proxy.conf.json --host app --port 4200

maplibregl runs inside of an Angular component:

new Map({
    container: 'map',
    style: 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte_world.vt/style.json',
    center: [19.8, 41.3],
    zoom: 2,
});

The first response of vectortiles.geo.admin.ch works:

But the second one runs into a CORS error:

Am I using this tile server in a wrong way? Or is the fault my local Docker/NGINX setup. Or perhaps Angular's own proxy.conf.json.

It seems only the requests to world.vectortiles.... are failing:

Finally here is my proxy.conf.json:

{
    "/api/*": {
        "target": "http://localhost:15001",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    },
    "/tiles/*": {
        "target": "https://world.vectortiles.geo.admin.ch",
        "secure": false,
        "changeOrigin": true
    },
    "/mbtiles/*": {
        "target": "https://world.vectortiles.geo.admin.ch",
        "secure": false,
        "changeOrigin": true
    },
    "/styles/*": {
        "target": "https://vectortiles.geo.admin.ch",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
            "^/styles": "/styles"
        }
    }
}

Answer 1

See if this can help you to rethink the way I want to deploy back-end and front-end seperate apps on the same server with nginx

Like you may do

http {
    server {
        listen 80 default_server;
        root /angular;

        location / {
            proxy_pass http://app:4200;

            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;

            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
        }

    }

    server {
        listen 15001 default_server;
        root /angular;

        location /api {
            proxy_pass http://web:80;
        }
    }
}