การเปิดใช้งาน 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ดูMDNสำหรับรายละเอียดของแอตทริบิวต์นั้นและเอกสารสำหรับเลเยอร์ OpenStreetMap สำหรับวิธีใช้กับ OpenLayers ( อัปเดต: นี่คือเอกสารที่เป็นทางการมากกว่านี้เล็กน้อยในที่ที่เหมาะสมกว่า)

เพื่อให้มั่นใจว่า OpenLayers ของคุณimgมีองค์ประกอบนั้นให้ตั้งค่าcrossOriginKeywordตัวเลือกในtileOptionsค่าในตัวเลือกเลเยอร์ของคุณ:

tileOptions: {crossOriginKeyword: 'anonymous'}

คุณสามารถตั้งค่าเป็น:

• "anonymous"- สร้างคำขอ CORS " แบบง่าย "
• "use-credentials"- สร้างคำขอ CORS " หนังสือรับรอง " พร้อมคุกกี้และการตรวจสอบสิทธิ์ 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
});

ฉันหวังว่านี่จะช่วยคนอื่นได้!

หมายเหตุ:ดูเหมือนว่าหากคุณใช้เมธอด / แอตทริบิวต์นี้คุณจำเป็นต้องใช้ tile server เพื่อส่งAccess-Control-Allow-Originส่วนหัวที่เหมาะสม ใช้กับเซิร์ฟเวอร์ที่ไม่ส่งส่วนหัวนั้นส่งผลให้ไทล์ไม่แสดง ตอนนี้ให้ GeoServer เล่นตาม ...

หลังจากนั้น

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

เพิ่ม

layer.tileOptions.crossOriginKeyword = null;