解决NGINX中Access-Control-Allow-Origin多源错误及地图加载失败问题

错误原因 #

出现Access-Control-Allow-Origin cannot contain more than one origin的核心问题是：Nginx配置中重复设置了跨域响应头，或者错误地将多个源直接写入Access-Control-Allow-Origin字段（该字段仅支持单个固定值、动态匹配源或通配符*）。

修复步骤 #

1. 修正Nginx跨域配置 #

打开/etc/nginx/sites-available/default配置文件，找到对应server或location块，替换原有CORS配置为以下正确写法：

location / {
    # 动态匹配合法请求源（按需修改允许的域名）
    if ($http_origin ~* (https?://your-frontend-domain.com|https?://localhost:\d+)) {
        add_header Access-Control-Allow-Origin $http_origin;
    }
    # 允许的请求方法和头
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
    
    # 快速处理OPTIONS预检请求
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 保留原有站点配置
    root /srv/myworldmap/html;
    index index.html;
}

说明：将your-frontend-domain.com替换为实际前端域名；若无需限制源（不建议生产环境使用），可直接改为add_header Access-Control-Allow-Origin *;。

2. 清理重复配置 #

检查整个Nginx配置文件，确保没有其他location块或全局配置中重复添加Access-Control-Allow-Origin头，避免重复设置导致多源冲突。

3. 验证并重启Nginx #

执行命令验证配置语法正确性：

sudo nginx -t

若提示test is successful，重启Nginx生效：

sudo systemctl restart nginx

4. 修正地图资源路径 #

打开/srv/myworldmap/html/index.html，检查protomaps.pmtiles的加载路径：

• 若前端与地图服务同域名，将绝对路径改为相对路径：

  // 原写法
  const tileUrl = 'http://mymapservername/protomaps.pmtiles';
  // 修改后
  const tileUrl = '/protomaps.pmtiles';
  

• 确保protomaps.pmtiles文件确实存在于/srv/myworldmap/html目录下，与文件结构一致。

验证修复 #

刷新前端页面，打开浏览器开发者工具Network标签，查看protomaps.pmtiles请求的响应头，确认Access-Control-Allow-Origin仅返回单个合法值，此时地图应能正常加载。

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