Angular中maplibregl在NGINX代理下的CORS错误排查

问题描述 #

本地开发环境中，Angular通过NGINX代理后，MapLibreGL加载地图时出现CORS错误。首次请求vectortiles.geo.admin.ch正常，但后续请求world.vectortiles.geo.admin.ch的瓦片资源时触发CORS报错，需排查是瓦片服务器使用方式、Docker/NGINX配置还是Angular proxy.conf.json的问题。

相关配置 #

NGINX代理配置 #

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容器启动命令 #

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

MapLibreGL初始化代码 #

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,
});

Angular 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"
        }
    }
}

问题分析与解决方案 #

核心原因 #

当前问题出在MapLibreGL直接请求了第三方域名world.vectortiles.geo.admin.ch，而你的代理配置没有覆盖这类请求的转发：

1. Angular的proxy.conf.json仅在开发服务器层面生效，但浏览器通过NGINX访问Angular时，瓦片请求会直接绕过Angular代理，发起跨域请求。
2. NGINX配置中未添加瓦片资源的代理规则，无法将相关请求转发到第三方服务器并处理CORS头。

解决方案1：修改NGINX配置（推荐） #

在NGINX中添加瓦片和样式的代理规则，让所有请求通过NGINX转发，统一处理CORS：

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;
        }

        # 新增瓦片资源代理规则
        location /tiles/ {
            proxy_pass https://world.vectortiles.geo.admin.ch/tiles/;
            proxy_set_header Host world.vectortiles.geo.admin.ch;
            proxy_hide_header Access-Control-Allow-Origin;
            add_header Access-Control-Allow-Origin *;
        }

        location /mbtiles/ {
            proxy_pass https://world.vectortiles.geo.admin.ch/mbtiles/;
            proxy_set_header Host world.vectortiles.geo.admin.ch;
            proxy_hide_header Access-Control-Allow-Origin;
            add_header Access-Control-Allow-Origin *;
        }

        # 新增样式文件代理规则
        location /styles/ {
            proxy_pass https://vectortiles.geo.admin.ch/styles/;
            proxy_set_header Host vectortiles.geo.admin.ch;
            proxy_hide_header Access-Control-Allow-Origin;
            add_header Access-Control-Allow-Origin *;
        }
    }
}

同时修改MapLibreGL的样式URL为相对路径：

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

解决方案2：通过MapLibreGL重写请求URL #

如果保留Angular代理配置，需通过transformRequest重写瓦片请求路径，让请求走Angular代理：

new Map({
    container: 'map',
    style: '/styles/ch.swisstopo.leichte-basiskarte_world.vt/style.json',
    center: [19.8, 41.3],
    zoom: 2,
    transformRequest: (url, resourceType) => {
        // 重写瓦片请求URL到代理路径
        if (resourceType === 'Tile' && url.startsWith('https://world.vectortiles.geo.admin.ch')) {
            return {
                url: url.replace('https://world.vectortiles.geo.admin.ch', '')
            };
        }
        return { url };
    }
});

此方案需确保NGINX将/tiles、/mbtiles路径转发到Angular开发服务器，同时Angular的proxy.conf.json配置保持不变。

内容的提问来源于stack exchange，提问作者tobias47n9e