Habilitación de CORS en OpenLayers

¿Es posible habilitar Cross-Origin Resource Sharing (CORS) en OpenLayers? ¿Si es así, cómo?

Tengo un mapa web en OpenLayers, y estoy usando un lienzo HTML para representarlo como una imagen PNG. Mi script funciona muy bien, pero debido a la política del mismo origen del navegador , solo puedo convertir mi lienzo en una imagen si todos los mosaicos del mapa que he dibujado provienen del mismo host (por ejemplo sub.domain.com).

Para aumentar la velocidad de carga de mi mapa, me tire de las baldosas de una serie de subdominios: a.domain.com, b.domain.com, etc. Esto mejora considerablemente el rendimiento, trabajando alrededor límite del navegador de cuatro conexiones simultáneas por host, pero me impide de alguna vez convertir mi lienzo a una imagen, como Los mosaicos provienen de múltiples hosts.

Estoy tratando de usar CORS para solucionar este problema. He configurado el Access-Control-Allow-Originencabezado de respuesta apropiado para el conjunto de mosaicos que sirvo con PHP, pero esto no tiene ningún efecto. Sospecho que esto se debe a que no tiene el Originencabezado en la solicitud (como se muestra en el ejemplo en la página Wiki). Parece que se requiere alguna configuración de OpenLayers. ¿Pero que? ¿Alguien más ha hecho esto con éxito?

¡Después de buscar mucho en la fuente OpenLayers , lo he encontrado! El problema no era un encabezado de solicitud faltante, sino un atributo faltante en los imgelementos que componen la capa, específicamente crossorigin. Consulte MDN para conocer los detalles de ese atributo y la documentación de las capas de OpenStreetMap para saber cómo usarlo con OpenLayers ( Actualización: aquí hay un poco más de documentación oficial en un lugar más razonable).

Para asegurarse de que sus OpenLayers imgtengan ese elemento, configure la crossOriginKeywordopción en el tileOptionsvalor en las opciones de su capa:

tileOptions: {crossOriginKeyword: 'anonymous'}

Puedes configurarlo para:

• "anonymous"- Haga una solicitud CORS " simple ".
• "use-credentials"- Realice una solicitud CORS "con credenciales ", con cookies y autenticación HTTP según sea necesario.
• null- No incluya el crossoriginatributo y, por lo tanto, no use CORS. El valor predeterminado para la mayoría de las clases de capa OpenLayers y la fuente de mis problemas.

Finalmente, para completar, aquí hay un ejemplo simplificado de cómo usarlo con una capa WMS. Trabajar con otras clases de capas es similar.

var layer = new OpenLayers.Layer.WMS('My Layer', 'http://my.server.com', {
    format: 'image/png',
    layers: 'my:layer'
}, {
    tileOptions: {crossOriginKeyword: 'anonymous'},
    transitionEffect: null
});

¡Espero que esto ayude a alguien más!

Nota: Parece que si usa este método / atributo, su servidor de mosaico debe enviar un Access-Control-Allow-Originencabezado apropiado . Al usarlo con un servidor que no envía ese encabezado, los mosaicos no se muestran. Ahora para que GeoServer juegue ...

justo después de

var layer =new OpenLayers.Layer.WMS(...

añadir

layer.tileOptions.crossOriginKeyword = null;