Angular调用Geoserver API遭遇CORS跨域拦截问题求助

环境说明 #

• GeoServer 2.22版本，部署在Apache Tomcat 9.0服务器上
• Angular项目、GeoServer、Tomcat均位于同一服务器
• 此前通过PHP Curl调用GeoServer API可正常工作，Angular调用时出现跨域问题

代码实现 #

HTML #

<button type="button" (click)="testFct()">OK</button>

TS组件文件 #

testFct(){
  var layer = 'region'
  this._apiService.PostData(layer)
  .subscribe(data => {
    console.log(data)
  })
}

服务文件（api.service.ts） #

PostData(layer:any) {

  let authorizationData = 'Basic ' + btoa('user' + ':' + 'password');
  
  const body = '<featureType><name>' + layer + '</name></featureType>';
  
  var options = new HttpHeaders()
  .set('Access-Control-Allow-Origin', '*')
  .set('Content-Type', 'text/xml')
  .set('Authorization', authorizationData);
  
   return this.http.post('http://IP:8080/geoserver/rest/workspaces/MyWorkspace/datastores/MyDatastore/featuretypes', body, { headers: options })

}

错误信息 #

点击"OK"按钮后触发的错误：

Access to XMLHttpRequest at
'http://IP:8080/geoserver/rest/MyWorkspace/pampas/MyDatastore/bdd/featuretypes'
from origin 'http://IP:4201' has been blocked by CORS policy: Response
to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

已尝试的操作 #

在/opt/tomcat/conf/web.xml中添加CORS过滤器配置，新增cors.allowed.headers参数并设置为*，重启Tomcat后问题依旧：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
      <param-name>cors.allowed.headers</param-name>
      <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

浏览器网络面板状态 #

POST : blocked : NS_ERROR_DOM_BAD_URI

OPTIONS : blocked : CORS Missing Allow Origin

查阅大量CORS资料并尝试多种方法均未解决，未找到Angular调用GeoServer API的针对性CORS解决方案，恳请帮助！

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