Kích hoạt CORS trong OpenLayers

Có thể bật Chia sẻ tài nguyên nguồn gốc chéo (CORS) trong OpenLayers không? Nếu vậy thì thế nào?

Tôi có một bản đồ web trong OpenLayers và tôi đang sử dụng một khung vẽ HTML để hiển thị nó dưới dạng hình ảnh PNG. Kịch bản của tôi hoạt động rất tốt, nhưng do chính sách cùng nguồn gốc của trình duyệt , tôi chỉ có thể chuyển đổi khung vẽ của mình thành hình ảnh nếu tất cả các ô bản đồ tôi vẽ cho nó đến từ cùng một máy chủ (ví dụ sub.domain.com).

Để tăng tốc độ tải bản đồ của tôi, tôi kéo các ô từ một loạt các tên miền phụ : a.domain.com, b.domain.comv.v. gạch đến từ nhiều máy chủ.

Tôi đang cố gắng sử dụng CORS để khắc phục vấn đề này. Tôi đã đặt Access-Control-Allow-Origintiêu đề phản hồi phù hợp cho lát xếp mà tôi phục vụ với PHP, nhưng điều này không có hiệu lực. Tôi nghi ngờ điều này là do không có Origintiêu đề trong yêu cầu (như trong ví dụ trên trang Wiki). Có vẻ như một số cấu hình OpenLayers là bắt buộc. Nhưng cái gì? Có ai khác đã làm điều này thành công?

Sau nhiều lần tham gia thông qua nguồn OpenLayers , tôi đã tìm thấy nó! Vấn đề không phải là một tiêu đề yêu cầu bị thiếu, mà là một thuộc tính bị thiếu trên các imgthành phần tạo nên lớp, cụ thể crossorigin. Xem MDN để biết chi tiết về thuộc tính đó và tài liệu về các lớp OpenStreetMap để biết cách sử dụng nó với OpenLayers ( Cập nhật: Đây là một tài liệu chính thức hơn ở một nơi hợp lý hơn).

Để đảm bảo rằng các OpenLayers của bạn imgcó phần tử đó, hãy đặt crossOriginKeywordtùy chọn trong tileOptionsgiá trị trong các tùy chọn lớp của bạn:

tileOptions: {crossOriginKeyword: 'anonymous'}

Bạn có thể đặt nó thành:

• "anonymous"- Thực hiện một yêu cầu CORS " đơn giản ".
• "use-credentials"- Thực hiện yêu cầu CORS "được chứng thực ", với cookie và xác thực HTTP theo yêu cầu.
• null- Không bao gồm crossoriginthuộc tính và do đó không sử dụng CORS. Mặc định cho hầu hết các lớp Lớp OpenLayers và nguồn gốc của những rắc rối của tôi.

Cuối cùng, để hoàn thiện, đây là một ví dụ rút gọn về cách sử dụng nó với lớp WMS. Làm việc với các lớp lớp khác là tương tự.

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

Tôi mong điều này giúp được người nào khác!

Lưu ý: Có vẻ như nếu bạn sử dụng phương thức / thuộc tính này, máy chủ ô của bạn được yêu cầu gửi Access-Control-Allow-Origintiêu đề thích hợp . Sử dụng nó với một máy chủ không gửi kết quả tiêu đề đó trong các ô không hiển thị. Bây giờ để có được GeoServer để chơi cùng ...

ngay sau đó

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

thêm vào

layer.tileOptions.crossOriginKeyword = null;