NGINX CORS配置错误导致地图瓦片加载失败求助

嘿，我来帮你分析解决这个问题！从你给出的报错信息来看，核心问题就是**Access-Control-Allow-Origin响应头被设置了多个源**——这个HTTP头规则上只能指定单个源或者通配符*（不过通配符在带凭证的请求里会失效，这点要注意），多源直接塞进去就会触发报错。

先帮你梳理下问题排查方向： #

• 你贴的NGINX配置片段里没看到CORS相关设置，但大概率是在其他地方重复配置了：比如/etc/nginx/nginx.conf的全局块、当前server块被截断的部分、或者某个被include进来的配置文件里，重复添加了add_header Access-Control-Allow-Origin ...指令，导致响应头里出现了多个值。
• 如果你之前尝试过用add_header Access-Control-Allow-Origin http://a.com http://b.com;这种写法，这是完全错误的——NGINX不支持这么配置多源，会直接把多个源拼进同一个头里，触发报错。

给你两种实用的正确配置方案： #

方案1：只允许单个源访问

直接在你的server块里添加以下配置：

# 设置允许的前端源
add_header Access-Control-Allow-Origin "http://你的前端实际域名";
# 允许的请求方法
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
# 允许的请求头
add_header Access-Control-Allow-Headers "Content-Type";

# 处理OPTIONS预检请求，直接返回204即可
if ($request_method = OPTIONS) {
    return 204;
}

方案2：需要允许多个不同源访问

这种情况得用NGINX的map指令动态匹配，先在http块（比如/etc/nginx/nginx.conf里的http段）添加：

map $http_origin $cors_origin {
    default ""; # 默认不允许
    http://允许的源1.com $http_origin;
    http://允许的源2.com $http_origin;
    https://允许的源3.com $http_origin; # 注意协议要和前端一致
}

然后回到你的server块里添加：

add_header Access-Control-Allow-Origin $cors_origin;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type";

if ($request_method = OPTIONS) {
    return 204;
}

最后提醒几个注意点： #

• 修改配置后一定要先执行sudo nginx -t检查语法是否正确，没问题再用sudo systemctl reload nginx让配置生效。
• 确保不要在不同的location、server块里重复设置Access-Control-Allow-Origin，避免冲突。
• 如果用了HTTPS，要保证CORS配置里的源和前端实际访问的协议（http/https）完全一致，不然也会触发跨域问题。

你可以先排查现有配置里有没有重复的CORS头设置，再试试上面的方案，应该就能解决地图瓦片加载的问题啦！

备注：内容来源于stack exchange，提问作者Raphael10