Aktivieren von CORS in OpenLayers


12

Ist es möglich, Cross-Origin Resource Sharing (CORS) in OpenLayers zu aktivieren ? Wenn das so ist, wie?

Ich habe eine Webkarte in OpenLayers und verwende eine HTML-Zeichenfläche, um sie als PNG-Bild zu rendern. Mein Skript funktioniert prima, aber aufgrund der Richtlinien zum gleichen Ursprung des Browsers kann ich meine Zeichenfläche nur dann in ein Bild konvertieren, wenn alle Kartenkacheln, die ich darauf gezeichnet habe, vom gleichen Host stammen (z sub.domain.com. B. ).

Zu meiner Karte der Ladegeschwindigkeit zu steigern, ziehe ich Fliesen aus einer Reihe von Sub - Domains: a.domain.com, b.domain.comusw. Diese Leistung erheblich verbessert, arbeitet rund um die Grenze des Browsers von vier gleichzeitigen Verbindungen pro Host, aber mich daran hindere , jemals meine Leinwand zu einem Bild konvertieren, wie Die Kacheln stammen von mehreren Hosts.

Ich versuche, CORS zu verwenden, um dieses Problem zu umgehen . Ich habe den entsprechenden Access-Control-Allow-OriginAntwortheader für das Kachelset festgelegt, das ich mit PHP versorge, aber dies hat keine Auswirkungen. Ich vermute, dass dies daran liegt, dass der OriginHeader nicht in der Anfrage enthalten ist (wie im Beispiel auf der Wiki-Seite gezeigt). Es scheint, dass eine OpenLayers-Konfiguration erforderlich ist. Aber was? Hat das noch jemand erfolgreich gemacht?

Antworten:


19

Nach langem Stöbern in der OpenLayers- Quelle habe ich es gefunden! Das Problem war nicht ein fehlender Anforderungsheader, sondern ein fehlendes Attribut für die imgElemente, aus denen der Layer besteht crossorigin. Einzelheiten zu diesem Attribut finden Sie in MDN und in der Dokumentation zu OpenStreetMap-Layern zur Verwendung mit OpenLayers ( Update: Hier finden Sie eine etwas offiziellere Dokumentation an einer angemesseneren Stelle).

Um sicherzustellen, dass Ihre OpenLayers imgüber dieses Element verfügen, setzen Sie die crossOriginKeywordOption in den tileOptionsWert in Ihren Ebenenoptionen:

tileOptions: {crossOriginKeyword: 'anonymous'}

Sie können es einstellen auf:

  • "anonymous"- Stellen Sie eine " einfache " CORS-Anfrage.
  • "use-credentials"- Stellen Sie eine " Credentialed " CORS-Anfrage, bei der Cookies und HTTP-Authentifizierung erforderlich sind.
  • null- Fügen Sie das crossoriginAttribut nicht ein und verwenden Sie daher kein CORS. Die Standardeinstellung für die meisten OpenLayers-Layer-Klassen und die Ursache meiner Probleme.

Der Vollständigkeit halber sehen Sie hier ein einfaches Beispiel für die Verwendung mit einer WMS-Ebene. Das Arbeiten mit anderen Layerklassen ist ähnlich.

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

Ich hoffe das hilft jemand anderem!

Hinweis: Es scheint , dass , wenn Sie diese Methode / Attribut verwenden, wird Ihre Kachel - Server benötigt einen entsprechenden senden Access-Control-Allow-OriginHeader. Die Verwendung mit einem Server, der diesen Header nicht sendet, führt dazu, dass die Kacheln nicht angezeigt werden. Jetzt soll GeoServer mitspielen ...


1
Schön, dass Sie es gefunden und mit uns geteilt haben.
Devdatta Tengshe


1

kurz nachdem

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

hinzufügen

layer.tileOptions.crossOriginKeyword = null;
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.