Avoiding CORS error with OpenLayers 3?

Unfortunate, what you are experiencing, is expected behavior, and not a Bug.

Once you add an Image from an external domain, or cross-domain, and use it on the canvas, the canvas becomes "tainted" and the browser will not allow you to pull data out of it.

The only solution for this is two step:

1. Proper headers need to be sent by the server, which is sending you the images

2. The crossOrigin attribute on the image itself in the JavaScript. In OpenLayers, you can do this by using crossOrigin: 'anonymous' in the layer settings. For example:

    var wms_layer=new ol.layer.Tile({
      extent: [-13884991, 2870341, -7455066, 6338219],
      source: new ol.source.TileWMS({
        url: 'http://demo.boundlessgeo.com/geoserver/wms',
        params: {'LAYERS': 'topp:states', 'TILED': true},
        serverType: 'geoserver',
        crossOrigin: 'anonymous'
      })
    });

Now I know that you do not have control over the server, so you cannot do the first step.

In-case the server allows it, you could have a proxy on your own server, which serves these tiles, and the whole issue will be side-stepped.