OpenLayers 4加载需认证WMS影像图层遇401错误，如何加认证请求头？

你遇到的401错误是因为Geoserver需要身份认证，但OpenLayers发送的GET请求没有携带必要的认证信息，下面给你两种实用的解决方法：

问题复现 #

你当前的代码如下：

const syr_layer = new ol_layer_Image({ 
  source: new ol_source_ImageWMS({ 
    url: 'serverurl', 
    crossOrigin: 'anonymous', 
    serverType: 'geoserver', 
    params: { 'LAYERS': 'tst:syr'}, 
    projection: 'EPSG:4326' 
  }) 
});

请求时返回错误：

GET (myserverurl) 401 (An Authentication object was not found in the SecurityContext)

方法1：直接给OpenLayers的ImageWMS源添加请求头 #

OpenLayers 4.6的ol.source.ImageWMS支持通过headers配置项直接设置请求头，把你的认证信息（比如Bearer Token或者基础认证信息）加在这里就行：

// 假设你已经获取到了认证Token，比如从登录接口返回或存在localStorage里
const authToken = localStorage.getItem('your-auth-token');

const syr_layer = new ol_layer_Image({ 
  source: new ol_source_ImageWMS({ 
    url: 'serverurl', 
    crossOrigin: 'anonymous', 
    serverType: 'geoserver', 
    params: { 'LAYERS': 'tst:syr'}, 
    projection: 'EPSG:4326',
    // 新增认证请求头
    headers: {
      // Bearer Token认证方式（推荐）
      'Authorization': `Bearer ${authToken}`,
      // 如果是基础认证，用下面这行（注意：btoa编码仅适用于非特殊字符的用户名密码）
      // 'Authorization': 'Basic ' + btoa('username:password')
    }
  }) 
});

方法2：用Angular HttpInterceptor全局拦截所有请求 #

如果你的应用里不止这一个WMS请求，或者其他HTTP请求也需要统一加认证头，用Angular的拦截器会更省心：

步骤1：创建认证拦截器 #

新建一个auth.interceptor.ts文件：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 从本地存储或认证服务中获取Token
    const authToken = localStorage.getItem('authToken');

    // 只给你的WMS服务器请求加头，避免影响其他第三方请求
    if (request.url.includes('serverurl')) {
      // 克隆请求并添加认证头
      const authenticatedRequest = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${authToken}`)
      });
      return next.handle(authenticatedRequest);
    }

    // 不需要认证的请求直接放行
    return next.handle(request);
  }
}

步骤2：在模块中注册拦截器 #

打开app.module.ts，把拦截器添加到providers里：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器存在
    }
  ]
})
export class AppModule { }

注意事项 #

• 如果是跨域请求，一定要确保你的Geoserver服务器配置了Access-Control-Allow-Headers，包含Authorization字段，否则浏览器会拦截带自定义头的请求。
• 基础认证（用户名密码编码）的安全性较低，建议优先使用Bearer Token的方式。

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