OpenLayersでCORSを有効にする

OpenLayersでクロスオリジンリソースシェアリング（CORS）を有効にすることは可能ですか？もしそうなら、どのように？

OpenLayersにWebマップがあり、HTMLキャンバスを使用してPNGマップとしてレンダリングしています。私のスクリプトはうまく機能しますが、ブラウザの同一生成ポリシーにより、描画したすべてのマップタイルが同じホストからのものである場合にのみ、キャンバスを画像に変換できます（例：）sub.domain.com。

マップの読み込み速度を高めるために、サブドメインの配列からタイルを取得します：a.domain.com、b.domain.comなど。これにより、ホストごとに4つの同時接続というブラウザーの制限を回避しながら、パフォーマンスが大幅に向上しますが、タイルは複数のホストから取得されます。

この問題を回避するためにCORSを使用しようとしています。Access-Control-Allow-OriginPHPで提供するタイルセットに適切な応答ヘッダーを設定しましたが、これは効果がありません。これはOrigin、リクエストにヘッダーが含まれていないことが原因であると思われます（Wikiページの例に示すように）。いくつかのOpenLayers構成が必要なようです。でも何？他の誰かがこれを成功させましたか？

OpenLayersのソースをよく見て、見つけました！問題はリクエストヘッダーの欠落ではなくimg、レイヤーを構成する要素、特にの属性の欠落ですcrossorigin。See MDNをその属性の詳細、およびのためのドキュメント OpenLayersをして、それを使用する方法については、OpenStreetMapの層のための（更新： ここでは、もう少し合理的な場所でより多くの公式ドキュメントがあります）。

OpenLayersにimgその要素があることを確認するには、レイヤーオプションの値にcrossOriginKeywordオプションを設定しtileOptionsます。

tileOptions: {crossOriginKeyword: 'anonymous'}

次のように設定できます。

• "anonymous"-「簡単な」CORSリクエストを作成します。
• "use-credentials"- 必要に応じてCookieとHTTP認証を使用して、「認証済み」CORS要求を作成します。
• null- crossorigin属性を含めないでください。したがって、CORSを使用しないでください。ほとんどのOpenLayers Layerクラスのデフォルトであり、トラブルの原因です。

最後に、完全を期すために、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;