QML中QtWebEngineView加载OpenWeatherMap Leaflet地图失败咨询

问题复现 #

QML开发场景下，使用QtWebEngineView组件加载Leaflet实现的第三方地图时，普通Leaflet演示站点可正常加载，OpenWeatherMap气象地图加载失败，已尝试自定义请求UA、Accept-Language、开启Cookie持久化均未解决。

正常加载示例代码 #

WebEngineView {
    anchors.fill: parent
    url: "http://mapshakers.com/projects/leaflet-pulse-icon/"
}

加载失败示例代码 #

WebEngineView {
    anchors.fill: parent
    url: "https://openweathermap.org/weathermap?basemap=map&lang=en&cities=false&layer=radar&lat=29.6915&lon=-95.0474&zoom=9"
    //url:"https://openweathermap.org/weathermap?basemap=map&cities=true&layer=temperature&lat=51.4552&lon=-0.1816&zoom=5"
    profile:  WebEngineProfile{
                       httpUserAgent: "Mozilla/5.0 (X11; Linux x86_64; rv:100.0) Gecko/20100101 Firefox/100.0"
                       httpAcceptLanguage : "en-US,en;q=0.5"
                       //AllowPersistentCookies:true // 配置后未生效
            }
}

问题1：加载失败根因判定 #

该问题不属于QtWebEngine对Leaflet的兼容问题，根因是OpenWeatherMap官方的访问限制：

• 其他Leaflet站点可正常加载，已经验证QtWebEngine对Leaflet框架的JS渲染、瓦片请求、交互逻辑的支持没有问题。
• OpenWeatherMap公共气象地图页配置了反爬与防盗链规则，对全新无历史访问记录的客户端上下文，会校验请求特征、Cookie合法性。缺少合法交互生成的Cookie、请求特征与主流桌面浏览器不匹配时，服务端会直接拦截地图瓦片请求，部分场景还会弹出人机验证。
• 仅修改UA和Accept-Language无法绕过这类校验：QtWebEngine默认的TLS指纹、请求头顺序、JS环境特征与Firefox、Chrome等主流浏览器存在可被识别的差异，即使UA伪装成Firefox，服务端仍可识别出请求来自嵌入式Web内核。

问题2：QtWebEngine自动接受Cookie的实现方法 #

之前配置Cookie持久化未生效，核心原因是属性名书写错误：AllowPersistentCookies是WebEngineProfile的枚举值，不是可直接赋值的属性。正确实现自动接受、持久化存储Cookie的方式如下：

• 正确配置WebEngineProfile的Cookie策略：将persistentCookiesPolicy属性设置为WebEngineProfile.AllowPersistentCookies，同时指定独立的存储名称，保证Cookie、缓存数据可持久化留存。
• 自动处理Cookie同意弹窗：页面加载完成后注入JS，自动点击站点的Cookie同意按钮，跳过交互步骤。
• （可选）如果需要完全自定义Cookie规则，可通过WebEngineProfile.cookieStore接口，手动增删改指定站点的Cookie。

对应可运行的配置示例：

WebEngineView {
    anchors.fill: parent
    url: "https://openweathermap.org/weathermap?basemap=map&lang=en&cities=false&layer=radar&lat=29.6915&lon=-95.0474&zoom=9"
    profile: WebEngineProfile {
        // 建议使用和当前QtWebEngine内核版本匹配的Chrome UA，伪装效果更好
        httpUserAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
        httpAcceptLanguage: "en-US,en;q=0.9"
        // 正确开启持久化Cookie
        persistentCookiesPolicy: WebEngineProfile.AllowPersistentCookies
        // 配置独立存储名，保证缓存、Cookie重启应用后不丢失
        storageName: "openweathermap_cache"
    }

    onLoadingChanged: {
        if (loadRequest.status === WebEngineLoadRequest.LoadSucceededStatus) {
            // 注入JS自动点击Cookie同意按钮
            runJavaScript(`
                const cookieAcceptBtn = document.querySelector('button[class*="cookie-consent-accept"], button#onetrust-accept-btn-handler');
                if (cookieAcceptBtn && !cookieAcceptBtn.hidden) {
                    cookieAcceptBtn.click();
                }
            `)
        }
    }
}

补充说明：如果完成上述配置后仍然无法加载地图，说明OpenWeatherMap的反爬规则已经拦截了QtWebEngine的请求，此时不建议继续伪装请求加载公共网页，可申请OpenWeatherMap官方API密钥，自行编写Leaflet页面调用官方瓦片接口加载，不会存在拦截问题。

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