Mengaktifkan CORS di OpenLayers

Apakah mungkin untuk mengaktifkan Cross-Origin Resource Sharing (CORS) di OpenLayers? Jika ya, bagaimana caranya?

Saya memiliki peta web di OpenLayers, dan saya menggunakan kanvas HTML untuk menjadikannya sebagai gambar PNG. Skrip saya berfungsi dengan baik, tetapi karena kebijakan yang sama dengan asal browser , saya hanya dapat mengubah kanvas saya menjadi gambar jika semua ubin peta yang saya gambar berasal dari host yang sama (misalnya sub.domain.com).

Untuk meningkatkan kecepatan memuat peta saya, saya menarik ubin dari berbagai subdomain: a.domain.com,, b.domain.comdll. Ini sangat meningkatkan kinerja, bekerja di sekitar batas peramban dari empat koneksi simultan per host, tetapi mencegah saya dari pernah mengubah kanvas saya ke gambar, seperti ubin berasal dari beberapa host.

Saya mencoba menggunakan CORS untuk mengatasi masalah ini. Saya telah menetapkan Access-Control-Allow-Originheader respons yang sesuai untuk tileset yang saya layani dengan PHP, tetapi ini tidak berpengaruh. Saya menduga ini karena tidak memiliki Originheader dalam permintaan (seperti yang ditunjukkan pada contoh di halaman Wiki). Tampaknya beberapa konfigurasi OpenLayers diperlukan. Tapi apa? Adakah yang berhasil melakukan ini?

Setelah banyak memahami melalui sumber OpenLayers , saya telah menemukannya! Masalahnya bukan tajuk permintaan yang hilang, tetapi atribut yang hilang pada imgelemen yang membentuk lapisan, khususnya crossorigin. Lihat MDN untuk detail atribut itu, dan dokumentasi untuk lapisan OpenStreetMap untuk cara menggunakannya dengan OpenLayers ( Pembaruan: Ini adalah dokumentasi yang lebih resmi di tempat yang lebih masuk akal).

Untuk memastikan bahwa OpenLayers Anda imgmemiliki elemen itu, setel crossOriginKeywordopsi dalam tileOptionsnilai dalam opsi layer Anda:

tileOptions: {crossOriginKeyword: 'anonymous'}

Anda dapat mengaturnya ke:

• "anonymous"- Buat permintaan CORS " sederhana ".
• "use-credentials"- Buat permintaan CORS " kredensial ", dengan cookie dan otentikasi HTTP sebagaimana diperlukan.
• null- Jangan sertakan crossoriginatributnya, dan karenanya jangan gunakan CORS. Default untuk sebagian besar kelas OpenLayers Layer, dan sumber masalah saya.

Akhirnya, untuk kelengkapan, berikut ini adalah contoh bagaimana cara menggunakannya dengan lapisan WMS. Bekerja dengan kelas layer lain serupa.

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

Saya harap ini membantu orang lain!

Catatan: Tampaknya jika Anda menggunakan metode / atribut ini, server ubin Anda harus mengirim Access-Control-Allow-Originheader yang sesuai . Menggunakannya dengan server yang tidak mengirim header itu mengakibatkan ubin tidak ditampilkan. Sekarang untuk membuat GeoServer bermain bersama ...

sehabis

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

Menambahkan

layer.tileOptions.crossOriginKeyword = null;