Cesium系列6 - 解决调用geoserver服务跨域请求的问题

本文介绍了解决Cesium加载GeoServer WMS数据时出现的跨域问题的方法。提供了两种解决方案,一种是通过修改GeoServer所在Tomcat的web.xml文件实现,另一种是修改web-inf下的web.xml文件来达到相同目的。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、cesium加载geoserver wms数据跨域报错,已成功解决,亲测可用

二、解决步骤:

解决方法一:修改geoserver所在tomcat的web.xml文件

解决方法二:修改geoserver所在web-inf/web.xml文件

二者选一种即可 ,原理一致,推荐选方法一

解决方法一步骤:

1.下载

链接:https://pan.baidu.com/s/15k3yTmtW5ojI4hPtNEhx1g 提取码:utbi 

2.找到里面的jar包cors-filter-2.4.jar和java-property-utils-1.9.1.jar复制在geoserver所在tomcat的根目录/lib/文件夹下

3.修改[tomcat]/conf/web.xml文件

将下述代码片段加入到在<filter>平级位置

<!-- cesium跨域解决方案1 步骤3--> 
 <filter>
	 <filter-name>CorsFilter</filter-name>
	 <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
	 <init-param>
	   <param-name>cors.allowed.methods</param-name>
	   <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
	 </init-param>
	 <init-param>
	   <param-name>cors.allowed.headers</param-name>
	   <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
	 </init-param>
	 <async-supported>true</async-supported>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

4.重启测试

解决方法二步骤:

  1. 下载压缩包文件http://shanbe.hezoun.com/cors.zip 同上,
  2. 将其放在[Geoserver]\webapps\geoserver\WEB-INF\下,并解压缩,最终的文件路径如下: 
    [Geoserver]\webapps\geoserver\WEB-INF\org\mortbay\servlets\CrossOriginFilter.class
  3. 修改[geoserver]/webapps/geoserver/WEB-INF下面的web.xml文件, 
    <filter>平级位置添加如下内容:
<filter> 
<filter-name>cross-origin</filter-name> 
<filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class> 
<init-param> 
<param-name>allowedOrigins</param-name> 
<param-value>*</param-value> 
</init-param> 
<init-param> 
<param-name>allowedMethods</param-name> 
<param-value>GET,POST</param-value> 
</init-param> 
<init-param> 
<param-name>allowedHeaders</param-name> 
<param-value>x-requested-with,content-type</param-value> 
</init-param> 
</filter> 
...其他内容 
<filter-mapping> 
<filter-name>cross-origin</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 

 4.重启geoserver

三、参考

其他参考博客

### 配置 Vite 解决请求 为了处理问题,在 `vite.config.js` 文件中可以通过配置服务器代理来实现。具体来说,通过向 `server.proxy` 添加相应的路径映射可以有效地解决开发环境中的访问难题[^1]。 对于特定 API 请求 `/api` 的代理设置如下: ```javascript import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.imooc-front.lgdsunday.club/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }); ``` 此段代码的作用在于将所有以 `/api` 开头的请求转发至指定的目标 URL,并启用 `changeOrigin` 参数确保目标服务器认为这些请求来自其自身的源。此外,还定义了一个重写函数用于去除路径前缀以便更好地匹配实际资源位置。 针对更复杂的场景,比如需要代理地理空间数据服务 Geoserver,则可以根据实际情况调整路径和目标地址。例如,如果要代理形如 `/geoserver/Cesium/wms` 或 `/geoserverApi/Cesium/wms` 这样的请求,可以在 `proxy` 对象内增加相应条目并指向本地或其他远程的服务端地址[^2]。 #### 地理信息服务代理实例 假设存在一个 GeoServer 实例运行在 `http://localhost:8080/geoserver` 上面,那么对应的代理配置可能是这样的: ```javascript import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/geoserver': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/geoserver/, '/geoserver') }, '/geoserverApi': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/geoserverApi/, '/geoserver') } } } }); ``` 上述配置使得应用程序能够透明地调用地理信息服务而无需担心限制问题
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值