Avoiding CORS error with OpenLayers 3?

Question

The CORS error seen is:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

All this doesn't work:

OpenLayers 3: Cross-Origin Request Blocked: The Same Origin Policy disallows

Enabling CORS in OpenLayers

https://stackoverflow.com/questions/20260620/openlayers-3-and-xyz-layer ( the exemple jsfiddle don't even work)

Can't do this (I don't own the server):

http://enable-cors.org/

I'm tring to save my map as PNG (http://openlayers.org/en/v3.0.0/examples/export-map.html).

The example works nice in my server with only the OSM layer, but when I add one more layer from anywhere, I got the CORS error.

My application allow the user to add arbitrary layers from any getMap link, so I have no control over the source Geoserver.

I have an addLayer function to do the job (add the user's layer to the map).

function addLayer( serverUrl, serverLayers, layerName ) {
    var newLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: serverUrl,
            isBaseLayer : false,
            crossOrigin: 'anonymous',  <<<<--- PROBLLEM
            params: {
                'layers': serverLayers,
                'format': 'image/png'
            },
            projection: ol.proj.get('EPSG:4326')
        })
    }); 
    newLayer.set('name', layerName);
    map.addLayer( newLayer );
    return newLayer;
}

When I add the crossOrigin: 'anonymous' nothing works anymore. Without crossOrigin it work if the map have only the OSM layer. By adding any other layer I got the CORS error.

Is there any other way to get the Map as image than using the canvas?

I've searched over all this site and found many different answers but none worked.

I cannot configure server side.

This is my export function:

function exportMap() {
    map.once('postcompose', function(event) {
        var canvas = event.context.canvas;
        var xx = canvas.toDataURL('image/png'); <<------- CORS Error !!
        console.log( xx );
    });
    map.renderSync();   
}

Answer 1

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.

Answer 2

I had the same problem and realized the solution as follows:

If your geoserver address and application address different then you get this error.

For Example;

C# Project Publish Address: http://localhost:51245/ApplicationName
Geoserver Address in Your Application: http://192.168.1.10:8889/geoserver/web

You will receive this error because the port numbers and ip addresses of the above addresses are different.

If you redirect geoserver address with ISS and publish application in same server then it will solve.

For Example:

C# Project Publish Address: http://192.168.1.10/ApplicationName
Geoserver Address in Your Application: http://192.168.1.10/RedirectedAdress/web

You must install AARv3 on server and 'Enable Proxy' from 'Application Request Routing Cache'. After then publish routing application on IIS.

Publish this code in webconfig

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>

        <rewrite>
            <rules>
                <rule name="ReverseProxyInboundRule1" stopProcessing="true">
                    <match url="(.*)" />
                    <action type="Rewrite" url="http://192.168.1.10:8086/geoserver/{R:1}" />
                </rule>
            </rules>
        </rewrite>
      <security>
    <requestFiltering>
      <requestLimits maxQueryString="32768"/>
    </requestFiltering>
  </security>
    </system.webServer>
     <system.web>
      <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/>
 </system.web>
</configuration>