Proxy for WMS layers

Question

Building an app with ol-cesium, depending on the WMS, Cross-Origin errors may occur:

"Image from origin 'http://www.ifremer.fr' has been blocked
from loading by Cross-Origin Resource Sharing policy: 
No 'Access-Control-Allow-Origin' header is present on 
the requested resource. Origin 'http://localhost:8080' 
is therefore not allowed access"

I don't have the capability to set CORS header on the WMS used (like suggested here https://github.com/openlayers/ol3-cesium/issues/127).

It looks like a proxy can be set up at Cesium level (see https://cesiumjs.org/2013/01/04/Cesium-Imagery-Layers-Tutorial/).

Can it be setup at OL level so that it set it up at Cesium level ? and if yes, how ?

Answer 1

Looking at the initialization code for OL3-Cesium, there is no built in functionality for applying the proxy at the OL level.

You could try to copy over the imageryProvider settings for the layers they created and include the proxy on the new one.

I haven't tried this so I don't know if that will work, but it's worth a shot if OL3 doesn't plan to release an update any time soon that fixes this.

Answer 2

A quick code search in ol3 code base shows that you can't set proxy at OL level.

Just use the WMS URL through a public CORS proxy (in first). I already answered a similar question It can maybe help.

Answer 3

You can use a proxy just by modifying the URL, rather than by teaching OL3 about proxies. For example, if your WMS server is:

http://www.example.com/geoserver/ows

You can just pass this URL to OL3 to make it go through your proxy at /proxy:

/proxy/http://www.example.com/geoserver/ows

Answer 4

With https://github.com/openlayers/ol3-cesium/pull/358, user can now set the olcs.proxy property on the source of the layer. eg:

source.set('olcs.proxy', '/myproxy/url');

Answer 5

I'm not using Cesium, just ThreeJS, but get the same CORS problem without a little image copying trick. This works for me -

function loadWmsImage( url, params, cb ){
  var tmpImage = new Image();
  var wmsPng = url + jQuery.param( params );
  tmpImage.onload = function(){
    var canv = document.createElement('canvas');
    var ctx = canv.getContext('2d');
    canv.width = this.width;
    canv.height = this.height;
    ctx.drawImage(this, 0, 0);
    cb(canv.toDataURL());
  }
  tmpImage.crossOrigin = 'anonymous';
  tmpImage.src =  wmsPng;
}

loadWmsImage( htMapUrl, htMapParams,
  function(img){
    customUniforms.bumpTexture.value = 
      new THREE.ImageUtils.loadTexture(img);
  });

Answer 6

Spend a lot of time trying and getting the experience.............~_~

WMTS olcs.proxy example :

var o_tileGrid = {
  origin: ol.extent.getTopLeft(projectionExtent),
  resolutions: resolutions,
  matrixIds: matrixIds
};
var o = {
  attributions: '',
  url: url,
  layer: layer,
  matrixSet: matrixSet,
  format: format,
  projection: projection,
  tileGrid: new ol.tilegrid.WMTS(o_tileGrid),
  style: style,
  wrapX: true
};                
var source = new ol.source.WMTS(o);
var proxy = "http://proxy.example.../";      
source.set("olcs.proxy",proxy);