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文件夹下)

        CORS
        com.thetransactioncompany.cors.CORSFilter
       
            cors.allowOrigin
            *
       
       
            cors.supportedMethods
            GET, POST, HEAD, PUT, DELETE
       
       
            cors.supportedHeaders
            Accept, Origin, X-Requested-With, Content-Type, Last-Modified
       
       
            cors.exposedHeaders
            Set-Cookie
       
       
            cors.supportsCredentials
            true
       
   
   
        CORS
        /*
   

上面的代码放在welcome-file-list之前即可
　　
        index.html
        index.htm
        index.jsp
    

4、重启tomcat