MapboxGL/MaplibreGL添加WMS图层遇CORS跨域问题求助

你的问题核心是：WMS服务https://wms.myurl.fr未返回Access-Control-Allow-Origin响应头，导致MaplibreGL的跨域请求被浏览器拦截。Leaflet能正常加载是因为它默认用<img>标签加载瓦片，这类请求不受CORS政策限制；而MaplibreGL采用Fetch/XHR请求瓦片，必须严格遵守CORS规则。

你添加的PHP头未生效，大概率是因为该PHP文件并非WMS请求的处理入口——QGIS Server的请求由其自身服务（搭配Apache/Nginx等Web服务器）直接处理，你写的PHP文件并没有参与到WMS响应的流程中，所以设置的头无法生效。

以下是可行的解决步骤：

1. 直接配置QGIS Server所在服务器的CORS规则 #

这是最根本的解决方式，根据你使用的Web服务器类型配置：

Apache服务器 #

• 在QGIS Server的站点配置文件（或.htaccess文件）中添加：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "*"

• 确保mod_headers模块已启用，执行a2enmod headers后重启Apache。

Nginx服务器 #

• 在对应server块的location配置中添加：

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers '*';

# 处理OPTIONS预检请求
if ($request_method = OPTIONS) {
    return 204;
}

• 重启Nginx使配置生效。

2. 检查MaplibreGL的WMS图层配置 #

确保你的WMS源配置包含正确的跨域参数：

const wmsSource = new maplibregl.Source({
    type: 'raster',
    tiles: [
        'https://wms.myurl.fr/qgis?map=projects/test_wms1.qgs&bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=carte_moissac'
    ],
    tileSize: 256,
    crossOrigin: 'anonymous' // 关键参数，需与服务端Allow-Origin配置匹配
});

3. 临时替代方案：使用本地代理 #

如果暂时无法修改服务器配置，可以搭建一个简单的PHP代理脚本转发WMS请求：

<?php
$url = $_GET['url'];
if (!$url) exit;

// 转发WMS请求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$response = curl_exec($ch);
curl_close($ch);

// 设置响应头并返回结果
header("Content-Type: image/png");
header("Access-Control-Allow-Origin: *");
echo $response;
?>

之后在MaplibreGL中用代理地址替换原WMS地址：

tiles: [
    'http://localhost/proxy.php?url=' + encodeURIComponent('https://wms.myurl.fr/qgis?map=projects/test_wms1.qgs&bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=carte_moissac')
]

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