Openlayers+GeoServer导出地图图片的跨域问题

跨域问题:加载了geoserver发布的图层,在导出时html页面后台提示错误:

SecurityError: The operation is insecure.

原因是:canvas导出图片时,涉及到跨域的问题,需将图层的crossOrigins设置为“anonymous”

var wmsSourceLucc = new ol.source.TileWMS({
    crossOrigin:'anonymous', //解决错误:SecurityError: The operation is insecure.
    url: mapWmsURL,
    params: {'LAYERS': luccLayerParams,tiled: true},
    serverType: 'geoserver'
});

这样能解决像引入的天地图、谷歌地图、百度地图、OSM地图等的SecurityError: The operation is insecure问题,但是新的问题又来了:自己用geoserver发布的图层又出现了下面的错误

CORS 头缺少 'Access-Control-Allow-Origin'

还是跨域的问题,查了很多技术文档,最终的解决方法是让用于发布geoserver的tomcat支持跨域。具体解决办法:
1、下载jar包
https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter/2.6
https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils/1.9.1
2、将两个jar包拷贝至tomcat的lib文件夹中
3、配置tomcat的web.xml(conf文件夹下)

<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-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
4、重启tomcat
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值