一 Canvas跨域現象

地圖導出是地圖中常用的功能，并且OpenLayers3中也提供了兩個地圖導出的例子:
http://openlayers.org/en/latest/examples/export-map.html http://openlayers.org/en/latest/examples/export-pdf.html。
看到這兩個例子我們都很興奮，直接copy過來不就實現導出地圖了嗎？so easy，媽媽再也不用擔心我導出不了地圖圖片啦！
但當我們抄好代碼執行時，現實就是這么赤裸裸的打臉：
我的代碼如下：

?

 //街道圖Layer.streetLayer=new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'})});

例子的圖層代碼如下：

?

 layer=new ol.layer.Tile({ source: new ol.source.OSM() });

沒多寫一行代碼的飄逸，抄過來直接運行，報錯如下：

?

跨域錯誤.png

二 問題排查

檢查案例源碼發現和我抄襲的代碼幾乎一模一樣，唯一區別是我使用的是谷歌底圖，例子使用的是osm的source。

?

 new ol.layer.Tile({ source: new ol.source.OSM() }),

為了一看究竟，我們查看osm的source源碼如下：

osm souce源碼

?

恍然大悟，原來只需要添加這 crossOrigin:'anonymous'就可以了。

于是改寫重置自己的谷歌圖層代碼如下：

?

//街道圖
Layer.streetLayer=new ol.layer.Tile({    source: new ol.source.XYZ({        crossOrigin: 'anonymous',        url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'    })
});

這下打印正常了。

三 加載自己的wms底圖還是跨域錯誤

我們上面通過對谷歌地圖加crossOrigin: 'anonymous'實現了地圖輸出了，解決canvas跨域問題了，但一般我們地圖是底圖+業務底圖（如wms）的，這時候打印發現還是報錯。

?

Layer.streetLayer=new ol.layer.Tile({source: new ol.source.XYZ({crossOrigin: 'anonymous',url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'})});
Layer.wmsship = new ol.layer.Tile({source: new ol.source.TileWMS({url: geoserverhost+'/gwc/service/wms',params: {'FORMAT': 'image/png','VERSION': '1.1.1',tiled: true,STYLES: '',LAYERS: 'ships:ta_pos_latest'}})});

這個例子我們使用了谷歌底圖疊加自己的wms/gwc等瓦片圖，發現export還是報跨域錯誤，理所當讓的，我給Layer.wmsship設置crossOrigin: 'anonymous'，以為就可以了，但不幸的是仍然報跨域錯誤，一點沒反應。

四 設置服務器cors徹底解決

我們發現，谷歌，osm設置crossOrigin就可以，我們自己wms設置的crossOrigin還是不行。問題出在哪里咧？查閱資料可知，osm,google的服務器一定設置了cors，所以客戶端設置crossOrigin才會起作用，而我們自己的wms或者瓦片所在的服務器沒有設置cors，所以客戶端設置或者不設置crossOrigin，都是無效的。也就是說，只有自己的服務器設置了cors，crossOrigin才會起到作用。
我們地圖是geoserver發布的wms或者gwc，對geoserver設置cors，參考之前的博客：http://blog.csdn.net/freeland1/article/details/41204485 ，根據第三節的cors設置下自己的服務器。

服務器設置完畢后，代碼改為如下

?

Layer.streetLayer=new ol.layer.Tile({visible: true,source: new ol.source.XYZ({crossOrigin: 'anonymous',url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'})});
Layer.wmsship = new ol.layer.Tile({source: new ol.source.TileWMS({crossOrigin: 'anonymous',url: geoserverhost+'/gwc/service/wms',params: {'FORMAT': 'image/png','VERSION': '1.1.1',tiled: true,STYLES: '',LAYERS: 'ships:ta_pos_latest'}})});

地圖輸出終于不報錯了，perfect！

作者：遙想公瑾當年
鏈接：https://www.jianshu.com/p/4beb4057f7be
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。