Habilitando o CORS em OpenLayers

É possível ativar o compartilhamento de recursos de origem cruzada (CORS) no OpenLayers? Se sim, como?

Eu tenho um mapa da Web no OpenLayers e estou usando uma tela HTML para renderizá-la como uma imagem PNG. Meu script funciona muito bem, mas devido à política de mesma origem do navegador , só posso converter minha tela em uma imagem se todos os blocos de mapa que eu desenhei vierem do mesmo host (por exemplo sub.domain.com).

Para aumentar a velocidade de carregamento do meu mapa, eu puxo telhas de uma matriz de subdomínios: a.domain.com, b.domain.com, etc. Isso melhora muito o desempenho, trabalhando em torno limite de quatro conexões simultâneas por host do navegador, mas impede-me de nunca converter minha tela de uma imagem, como os blocos vêm de vários hosts.

Estou tentando usar o CORS para solucionar esse problema. Eu configurei o Access-Control-Allow-Origincabeçalho de resposta apropriado para o conjunto de peças que sirvo com PHP, mas isso não tem efeito. Eu suspeito que isso se deva a não ter o Origincabeçalho na solicitação (como mostrado no exemplo na página Wiki). Parece que é necessária alguma configuração do OpenLayers. Mas o que? Alguém mais fez isso com sucesso?

Depois de muito grepping através da fonte OpenLayers , eu encontrei! O problema não era um cabeçalho de solicitação ausente, mas um atributo ausente nos imgelementos que compõem a camada, especificamente crossorigin. Consulte o MDN para obter os detalhes desse atributo e a documentação das camadas do OpenStreetMap para saber como usá-lo com o OpenLayers ( atualização: aqui está uma documentação um pouco mais oficial em um local mais razoável).

Para garantir que seus OpenLayers imgtenham esse elemento, defina a crossOriginKeywordopção no tileOptionsvalor nas opções de sua camada:

tileOptions: {crossOriginKeyword: 'anonymous'}

Você pode configurá-lo para:

• "anonymous"- Faça uma solicitação CORS " simples ".
• "use-credentials"- Faça uma solicitação CORS " credenciada ", com cookies e autenticação HTTP, conforme necessário.
• null- Não inclua o crossoriginatributo e, portanto, não use o CORS. O padrão para a maioria das classes OpenLayers Layer e a fonte dos meus problemas.

Por fim, para ser completo, eis um exemplo simplificado de como usá-lo com uma camada WMS. Trabalhar com outras classes de camadas é semelhante.

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 isto ajude alguém!

Nota: Parece que, se você usar esse método / atributo, seu servidor de bloco será obrigado a enviar um Access-Control-Allow-Origincabeçalho apropriado . Usá-lo com um servidor que não envia esse cabeçalho resulta nos blocos não exibidos. Agora, para obter o GeoServer para jogar junto ...

logo após

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

adicionar

layer.tileOptions.crossOriginKeyword = null;