Увімкнення CORS у OpenLayers

Чи можна ввімкнути перехресне походження ресурсів (CORS) у OpenLayers? Якщо так, то як?

У мене є веб-карта у OpenLayers, і я використовую HTML-полотно, щоб відтворити її як зображення PNG. Мій сценарій чудово працює, але завдяки політиці веб-переглядача з однаковим походженням я можу конвертувати своє полотно у зображення лише у тому випадку, якщо всі плитки карти, які я намалював, походять із одного хоста (наприклад sub.domain.com).

Щоб збільшити швидкість завантаження карти, я витягую плитки з масиву субдоменів:, a.domain.comі b.domain.comт. Д. Це значно покращує продуктивність, обробляючи обмеження браузера в чотири одночасних з'єднання на хост, але заважає мені коли-небудь перетворювати моє полотно на зображення, як плитка виходить від декількох хостів.

Я намагаюся використовувати CORS, щоб вирішити цю проблему. Я встановив Access-Control-Allow-Originвідповідний заголовок відповіді для набору плиток, який я обслуговую з PHP, але це не має ефекту. Я підозрюю, що це пов'язано з відсутністю Originзаголовка в запиті (як показано в прикладі на сторінці Wiki). Здавалося б, потрібна певна конфігурація OpenLayers. Але що? Хтось ще зробив це успішно?

Після довгого проскакування джерела OpenLayers я знайшов його! Проблема полягала не у відсутності заголовка запиту, а у відсутності атрибута imgелементів, які складають шар crossorigin. Докладні відомості про цей атрибут та документацію для шарів OpenStreetMap див. У MDN щодо того, як ним користуватися з 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;