如何为OpenLayers4请求添加HTTP头并注入WMS/WFS Basic认证

刚好之前处理过类似的需求，给你分享几种在OpenLayers 4里添加HTTP头（包括Basic认证）的实用方法，针对WMS/WFS这类需要认证的源完全适用：

一、全局设置HTTP头（适合全站请求都需认证的场景） #

如果你的所有OpenLayers请求都需要携带相同的HTTP头（比如全站Basic认证），可以用OpenLayers提供的全局请求头设置方法，一行代码就能搞定：

// 替换成你的用户名和密码，btoa会把字符串转成Base64格式
const authHeader = 'Basic ' + btoa('your-username:your-password');
ol.net.setRequestHeader('Authorization', authHeader);

这样所有通过OpenLayers发起的请求（瓦片、WFS、WMS等）都会自动带上这个Authorization头，不用逐个源去配置，非常省心。

二、针对单个源自定义加载器（灵活控制特定请求） #

如果只有部分源需要认证，或者需要更精细地控制请求逻辑，推荐给对应的WMS/WFS源自定义loader函数，手动处理请求并注入HTTP头：

示例1：带Basic认证的WMS源 #

const wmsSource = new ol.source.TileWMS({
  url: 'https://apps.sogelink.fr/maplink/public/wms',
  params: {
    'LAYERS': 'your-target-layer',
    'VERSION': '1.1.1',
    'FORMAT': 'image/png'
  },
  // 自定义加载器，替换默认的请求逻辑
  loader: function(extent, resolution, projection) {
    // 生成标准的WMS GetMap请求URL
    const requestUrl = this.getGetMapUrl(extent, resolution, projection);
    const xhr = new XMLHttpRequest();
    
    xhr.open('GET', requestUrl, true);
    // 注入Basic认证头
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa('your-username:your-password'));
    // 也可以添加其他自定义头，比如指定Accept类型
    xhr.setRequestHeader('Accept', 'image/png');
    
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 处理返回的瓦片图片，添加到源中
        const img = new Image();
        img.onload = function() {
          const tileImage = new ol.Image(extent, resolution, 1, img);
          wmsSource.addImage(tileImage);
        };
        img.src = URL.createObjectURL(xhr.response);
      }
    };
    
    xhr.send();
  }
});

示例2：带Basic认证的WFS GetFeature请求 #

// 假设你已经创建了矢量源
const vectorSource = new ol.source.Vector();

function fetchAuthenticatedWFSFeatures() {
  const wfsUrl = 'https://apps.sogelink.fr/maplink/public/wfs?request=GetFeature&typename=your-feature-type&version=1.1.0&outputFormat=GML3';
  const xhr = new XMLHttpRequest();
  
  xhr.open('GET', wfsUrl, true);
  xhr.setRequestHeader('Authorization', 'Basic ' + btoa('your-username:your-password'));
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 解析WFS返回的Feature并添加到矢量源
      const features = new ol.format.WFS().readFeatures(xhr.responseText);
      vectorSource.addFeatures(features);
    }
  };
  
  xhr.send();
}

// 调用函数获取数据
fetchAuthenticatedWFSFeatures();

三、注意事项 #

• Base64编码的坑：原生btoa函数对包含特殊字符（比如中文、@、特殊符号）的用户名/密码处理可能出错，遇到这种情况可以用encodeURIComponent先处理字符串，或者使用更可靠的Base64库（比如js-base64）来编码。
• 跨域问题：如果你的前端页面和WMS/WFS服务不在同一个域名下，需要服务端配置CORS，允许携带Authorization头，否则浏览器会拦截请求。
• 安全问题：绝对不要在前端代码里硬编码明文的用户名和密码！建议通过用户输入、后端接口返回临时认证令牌等安全方式获取认证信息，避免泄露。

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