在OpenLayers中启用CORS

是否可以在OpenLayers中启用跨域资源共享（CORS）？如果是这样，怎么办？

我在OpenLayers中有一个网络地图，并且正在使用HTML画布将其呈现为PNG图像。我的脚本效果很好，但是由于浏览器的同源策略，如果我绘制到其上的所有地图图块都来自同一主机（例如sub.domain.com），我只能将其转换为图像。

为了提高地图的加载速度，我从一系列子域中拉取了磁贴：a.domain.com，b.domain.com等，这大大提高了性能，可以解决浏览器每个主机同时进行四个连接的限制，但是却无法将画布转换为图像，例如磁贴来自多个主机。

我正在尝试使用CORS来解决此问题。我Access-Control-Allow-Origin为与PHP一起使用的tileset 设置了适当的响应标头，但这没有效果。我怀疑这是由于请求中没有Origin标题（如Wiki页面上的示例所示）。似乎需要某些OpenLayers配置。但是呢 其他人成功完成了吗？

经过OpenLayers 源代码的大量探索之后，我发现了！问题不是缺少请求标头，而是img组成图层的元素（特别是）上缺少属性crossorigin。见MDN该属性的细节，以及文档的OpenStreetMap的层为如何使用的OpenLayers使用它（更新： 这里是一个小更合理的地方更多的官方文档）。

为了确保您的OpenLayers img具有该元素，请在图层选项crossOriginKeyword的tileOptions值中设置选项：

tileOptions: {crossOriginKeyword: 'anonymous'}

您可以将其设置为：

• "anonymous"-提出“ 简单的 ” CORS请求。
• "use-credentials"-发出“ 凭据 ” CORS请求，并根据需要使用cookie和HTTP身份验证。
• null-不包含crossorigin属性，因此不使用CORS。大多数OpenLayers图层类的默认设置，也是造成麻烦的原因。

最后，为了完整起见，这是一个简化的示例，说明了如何将其与WMS图层一起使用。与其他图层类一起工作是相似的。

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

我希望这可以帮助其他人！

注意：看来，如果您使用此方法/属性，则需要您的切片服务器发送适当的Access-Control-Allow-Origin标头。在不发送该标头的服务器上使用它会导致不显示磁贴。现在让GeoServer发挥作用...

刚过

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

加

layer.tileOptions.crossOriginKeyword = null;