前端访问geoserver服务发生跨域的解决办法，以及利用html2canvas下载绘制的地图

已于 2023-10-27 01:48:56 修改
阅读量428 收藏
点赞数
分类专栏： 前端数据可视化 文章标签： 前端 java openlayers geoserver
于 2023-10-27 01:48:36 首次发布
本文链接：https://blog.csdn.net/zmx781284440/article/details/134068029
版权

我的业务场景：

需要利用html2canvas下载Openlayers绘制的地图。

预期：可以下载成图片甚至其他格式（svg）文件。

结果：下载下来是个空白图片。

排查错误：请求数据正常回显到页面上，利用html2canvas截取的时候会发生跨域，导致无法绘制。

首先处理tomcat跨域问题

第一步下载两个jar包：

1. cors-filter-2.6.jar

https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter/2.6

2. java-property-utils-1.9.1.jar

https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils/1.9.1

下载好放在 webapps/geoserver/WEB-INF/lib 文件下，如下图所示：

第二步：修改 webapps/geoserver/WEB-INF/web.xml下的代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <display-name>GeoServer</display-name>

      <context-param>
    <param-name>serviceStrategy</param-name>
    <!-- Meaning of the different values :

         PARTIAL-BUFFER2
         - Partially buffers the first xKb to disk. Once that has buffered, the the
           result is streamed to the user. This will allow for most errors to be caught
           early.

         BUFFER
         - stores the entire response in memory first, before sending it off to
           the user (may run out of memory)

         SPEED
         - outputs directly to the response (and cannot recover in the case of an
           error)

         FILE
         - outputs to the local filesystem first, before sending it off to the user
      -->
    <param-value>PARTIAL-BUFFER2</param-value>
  </context-param>

  <context-param>
    <!-- see comments on the PARTIAL-BUFFER strategy -->
    <!-- this sets the size of the buffer.  default is "50" = 50kb -->

    <param-name>PARTIAL_BUFFER_STRATEGY_SIZE</param-name>
    <param-value>50</param-value>
  </context-param>

  <!--Can be true or false (defaults to: false). -->
  <!--When true the JSONP (text/javascript) output format is enabled -->
  <!--
  <context-param>
    <param-name>ENABLE_JSONP</param-name>
    <param-value>true</param-value>
  </context-param>
  -->
    <!--
    <context-param>
      <param-name>PROXY_BASE_URL</param-name>
      <param-value>http://82.58.146.45/geoserver</param-value>
    </context-param>
     -->

     <!--
    <context-param>
       <param-name>GEOSERVER_DATA_DIR</param-name>
        <param-value>C:\eclipse\workspace\geoserver_trunk\cite\confCiteWFSPostGIS</param-value>
    </context-param>
   -->

    <!-- pick up all spring application contexts -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath*:/applicationContext.xml classpath*:/applicationSecurityContext.xml</param-value>
    </context-param>

    <filter>
     <filter-name>FlushSafeFilter</filter-name>
     <filter-class>org.geoserver.filters.FlushSafeFilter</filter-class>
    </filter>

    <filter>
      <filter-name>Set Character Encoding</filter-name>
      <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
      <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
      </init-param>
    </filter>

    <filter>
     <filter-name>SessionDebugger</filter-name>
     <filter-class>org.geoserver.filters.SessionDebugFilter</filter-class>
    </filter>

    <filter>
    <filter-name>filterChainProxy</filter-name>
     <filter-class> org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>

    <filter>
      <filter-name>xFrameOptionsFilter</filter-name>
      <filter-class>org.geoserver.filters.XFrameOptionsFilter</filter-class>
    </filter>

   <filter>
     <filter-name>GZIP Compression Filter</filter-name>
     <filter-class>org.geoserver.filters.GZIPFilter</filter-class>
     <init-param>
         <!-- The compressed-types parameter is a comma-separated list of regular expressions.
              If a mime type matches any of the regular expressions then it will be compressed.
              -->
         <param-name>compressed-types</param-name>
         <param-value>text/.*,.*xml.*,application/json,application/x-javascript</param-value>
     </init-param>
   </filter>

   <filter>
     <filter-name>Advanced Dispatch Filter</filter-name>
     <filter-class>org.geoserver.platform.AdvancedDispatchFilter</filter-class>
     <!--
     This filter allows for a single mapping to the spring dispatcher. However using /* as a mapping
     in a servlet mapping causes the servlet path to be "/" of the request. This causes problems with
     library like wicket and restlet. So this filter fakes the servlet path by assuming the first
     component of the path is the mapped path.
     -->
   </filter>

   <filter>
    <filter-name>Spring Delegating Filter</filter-name>
    <filter-class>org.geoserver.filters.SpringDelegatingFilter</filter-class>
    <!--
    This filter allows for filters to be loaded via spring rather than
    registered here in web.xml.  One thing to note is that for such filters
    init() is not called. INstead any initialization is performed via spring
    ioc.
    -->
   </filter>

   <filter>
     <filter-name>Thread locals cleanup filter</filter-name>
     <filter-class>org.geoserver.filters.ThreadLocalsCleanupFilter</filter-class>
     <!--
     This filter cleans up thread locals Geotools is setting up for concurrency and performance
     reasons
     -->
   </filter>

   <!-- Uncomment following filter to enable CORS in Jetty. Do not forget the second config block further down.
    <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
      <init-param>
        <param-name>chainPreflight</param-name>
        <param-value>false</param-value>
      </init-param>
      <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>allowedMethods</param-name>
        <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>allowedHeaders</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>
    -->

   <!-- Uncomment following filter to enable CORS in Tomcat. Do not forget the second config block further down.
    <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      <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,PUT,DELETE,HEAD,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>
    -->

    <!--
      THIS FILTER MAPPING MUST BE THE FIRST ONE, otherwise we end up with ruined chars in the input from the GUI
      See the "Note" in the Tomcat character encoding guide:
      http://wiki.apache.org/tomcat/FAQ/CharacterEncoding
    -->
    <filter-mapping>
      <filter-name>Set Character Encoding</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

   <!-- Uncomment following filter to enable CORS
    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    -->

    <filter-mapping>
      <filter-name>FlushSafeFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
      <filter-name>SessionDebugger</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
      <filter-name>GZIP Compression Filter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
      <filter-name>xFrameOptionsFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--
      If you want to use your security system comment out this one too
    -->
    <filter-mapping>
      <filter-name>filterChainProxy</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
      <filter-name>Advanced Dispatch Filter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
      <filter-name>Spring Delegating Filter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <filter-mapping>
      <filter-name>Thread locals cleanup filter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- general initializer, should be first thing to execute -->
    <listener>
      <listener-class>org.geoserver.GeoserverInitStartupListener</listener-class>
    </listener>

    <!-- logging initializer, should execute before spring context startup -->
    <listener>
      <listener-class>org.geoserver.logging.LoggingStartupContextListener</listener-class>
    </listener>

    <!--  spring context loader -->
    <listener>
      <listener-class>org.geoserver.platform.GeoServerContextLoaderListener</listener-class>
    </listener>

    <!--  http session listener proxy -->
    <listener>
      <listener-class>org.geoserver.platform.GeoServerHttpSessionListenerProxy</listener-class>
    </listener>

	<!-- request context listener for session-scoped beans -->
	<listener>
		<listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
	</listener>

    <!-- spring dispatcher servlet, dispatches all incoming requests -->
    <servlet>
      <servlet-name>dispatcher</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    </servlet>

    <!-- single mapping to spring, this only works properly if the advanced dispatch filter is
         active -->
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>

    <mime-mapping>
      <extension>xsl</extension>
      <mime-type>text/xml</mime-type>
    </mime-mapping>
    <mime-mapping>
      <extension>sld</extension>
      <mime-type>text/xml</mime-type>
    </mime-mapping>
    <mime-mapping>
      <extension>json</extension>
      <mime-type>application/json</mime-type>
    </mime-mapping>
    <!--  提供跨域支持 （下面的代码是核心其他用自己的）-->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

</web-app>

接下来是修改前端代码：

先下载html2canvas依赖：

npm install --save html2canvas

// 下载的代码
download() {
  const el = document.getElementById("shuilunColorMap")
  html2canvas(el, {
    backgroundColor: '#07253B',
    useCORS: true,  // 允许跨域
    // foreignObjectRendering : true,
    allowTaint :false
  }).then((canvas) => {
    const dataURL = canvas.toDataURL('image/png')
    const creatDom = document.createElement('a')
    document.body.appendChild(creatDom)
    creatDom.href = dataURL
    creatDom.download = '图片'
    creatDom.click()
  })
},

// 所有的new TileLayer下面添加  crossOrigin: 'anonymous'
var lineView = new TileLayer({
  source: new TileWMS({
    crossOrigin: 'anonymous',
    url: URL_MAP,
    params: {
      VERSION: "1.1.1",
      LAYERS: "wanjiazhai_longkou:shuilunji_dwg_Polyline",
      STYLES: "wjzLine",
    },
  }),
});

完成以上步骤，恭喜你又解决一个甲方的特异需求。 （欢迎妹子前来咨询，如有疑问可随时解答）

ღ张明宇࿐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cors-filter-2.6和java-property-utils-1.13
01-19
跨域错误所需jar包，cors-filter和java-property-utils最新版本
GeoServer发布矢量切片及其调用方式(mapbox/leaflet)
南山老沙
12-10 8802
前言：矢量切片(VectorTile)是当前WebGIS较热技术，高德及百度等在线地图都纷纷使用矢量切片技术(当然数据都是加密的)。矢量切片好处很多，简单几点就是，轻量，客户端渲染，还可加密（栅格切片容易被爬取）。矢量切片格式一般有GeoJSON、TopoJSON和.mvt(MapBox Vector Tile)，还有常用的 .pbf。 pbf 格式是常用的矢量切片数据格式，Mapbox 及 Le...
前端调用geoserver服务，数据视图不能实时更新
qq_44100149的博客
01-04 402
leaflet、openlayer加载地图服务，数据改变，视图未实时更新问题
(一)vue3+vite+cesium部署、控件隐藏、GeoServer安装部署、加载GeoServer服务遇到的跨域问题
最新发布
a974313302的博客
03-21 695
本文主要是记载一下在学习中遇到的问题以及解决。按照以下进行配置：关闭shell窗口，将刚创建的项目拖入VScode中打开，同时打开命令窗口，输入pnpm dev，启动项，查看项目是否创建成功。prettier 风格配置单引号不使用分号每行宽度至多80字符不加对象|数组最后逗号换行符号不限制（win mac 不一致）vue组件名称多单词组成（忽略index.vue）props解构（关闭）husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )
js调用geoserver地图层，附加完整控制功能和注释说明
cyw8998的专栏
02-09 3725
        #map {            width: 800px;            height: 664px;            border: 1px solid black;/*边框粗细*/        }  /*声明一个边框，在此设定其大小为800*664*/function init(){ // 生成基本map对象，然后在map对象中设定位置和图层    var
Geoserver的rest接口使用（后台或者前端调实现自动发布服务）
weixin_30257433的博客
02-22 2754
Geoserver提供许多服务的发布，我们可以通过控制台进行手动发布，至于至于如何在程序中利用代码发布服务，这如何做？可以通过两种思路进行一通过后台通过请求rest接口进行发布或者前端通过ajax,另一种通过xml方式详细的请参考该篇文章简析GeoServer服务的内部文件组织以及GeoServer自动化服务发布工具的开发思路本文主要介绍地第一种方式（java语言）如何发布...
解决geoserver产生跨域问题
qq_52231465的博客
07-28 304
2.23.1。
跨域 tomcat容器需要的CorsFilter jar文件
cengjing0616k的专栏
03-26 774
直接可下载 ， 不客气 https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter/1.7 https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils/1.9
Geoserver跨域解决方法
hsg77的专栏
06-17 3722
Geoserver跨域解决方法 参考来源：https://blog.csdn.net/GIS_Lyn/article/details/84744184 首先两种方式发布GeoServer，分别是Jetty与Tomcat 两种方式跨域 cross origin 解决方法不同，看完继续看第三种解决方法 方法1： Jetty发布的解决方法 自动安装的geoserver版本 https://www.c...
Geoserver 安装及CORS跨域资源访问配置
铭净止水的博客
04-11 8352
在使用了geoserver发布了矢量切片地图并使用了https://github.com/Leaflet/Leaflet.VectorGrid插件访问之后，莫名的出现了跨域问题：Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' 以下省略，想必依靠以...
geoserver 的跨域问题怎么解决
虎康的博客
11-03 367
要解决 GeoServer 的跨域问题，可以通过配置 GeoServer 的 web.xml 文件来启用跨域资源共享（CORS）。在某些情况下，你可能需要根据实际需求进行更详细的配置。这样可以更精细地控制跨域请求的权限。geoserver 发生跨域问题报错。在上述代码中，我们使用。元素来设置允许的源（
GeoServer解决jetty和tomcat服务访问跨域的问题
12-22
解决Geoserver在windows环境使用geoserver安装程序 和 windows或linux环境tomcat war包安装后的服务访问跨域问题。
linux geoserver允许跨域访问
11-26
Linux中的geoserver安装，直接把geoserver.war放到tomcat/webapps下即可； geoserver默认是不允许跨域访问的，如果要允许跨域访问，请按以下步骤操作： （已在geoserver 2.12.5下亲测可用）
解决geoserver跨域问题.rar
05-23
geoserver默认是不支持跨域的，需要我们在geoserver中做一些配置。
Geoserver解决Tomcat跨域问题文件.rar
09-06
Geoserver解决Tomcat跨域问题所需要的文件，亲测有效。如问题没有得到解决，可以私信给我，看到私信后我会及时回复
Geoserver跨域问题解决方案
12-06
1.将cors-filter-1.7.jar，java-property-utils-1.9.jar这两个库文件，放到lib目录下 2.修改配置文件
解决Geoserver请求跨域的几种思路
weixin_34270865的博客
02-05 545
文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/ 1.背景描述      跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时，如果中间件存有跨域文件（crossdomain.xml）则可以轻松实现跨域。     而JS开发的前端，针对GET请求则又可以通过J...
Openlayers使用WFS服务的跨域问题的解决办法
aiwotx1的专栏
08-16 1114
网上关于这个问题的解决办法的帖子有很多，比如http://wenku.baidu.com/view/da8f10f1941ea76e58fa047a.html这个就很不错。 我碰到的问题用这个方法依然没法解决，按他的说明配置后，发送WFS请求不再提示跨域的问题了，但是没有得到正确的结果，而是转到了openlayers的主页。 于是回过头看proxy.cgi的代码： if method ==
WebGIS开发之Geoserver跨域问题
自己写着玩的
01-04 380
一般调用WFS服务时，GeoServer会出现跨域问题。 目录 症状： 解决方案： Step1： Step2： 如果还不行： 症状： 浏览器报错：已拦截跨域请求，同源策略禁止读取位于xxxxxxx的远程资源（原因：CORS请求未成功） 解决方案： Step1： 修改GeoServer的web.xml文件，文件路径： X:\Program Files (x86)\GeoS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ღ张明宇࿐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值