如何使用OpenLayers 7.1.0通过HTTP基础认证访问WMS服务

要通过用户名/密码的HTTP基础认证访问https://wms-eval.chartworld.com的WMS服务，你需要在OpenLayers的ImageWMS源配置中添加认证请求头，具体实现如下：

核心逻辑 #

HTTP基础认证要求请求头携带Authorization字段，格式为Basic [base64编码的用户名:密码]。你可以直接在OpenLayers的ImageWMS源配置中通过fetchOptions注入该请求头。

完整代码示例 #

// 替换为你的实际用户名和密码
const username = '你的用户名';
const password = '你的密码';

// 生成基础认证的Authorization头
const authHeader = 'Basic ' + btoa(`${username}:${password}`);

const ENCAuthLayer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        ratio: 1,
        params: {
            LAYERS: 'ENC',
            CSBOOL: '2183',
            CSVALUE: '10,5,20,10,1,2,1,4000000,100000,200000,1'
        },
        url: 'https://wms-eval.chartworld.com',
        // 配置请求选项，添加认证头
        fetchOptions: {
            headers: {
                'Authorization': authHeader
            }
        }
    })
});

注意事项 #

• 生产环境安全提示：不要在前端代码中硬编码用户名和密码，这会导致敏感信息泄露。建议通过后端代理服务转发WMS请求，由后端统一处理认证逻辑。
• 特殊字符兼容：如果用户名/密码包含非ASCII字符，btoa()可能无法正常处理，需要先将字符串转成UTF-8编码再进行base64转换。

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