Gạch bản đồ không hiển thị (tất cả màu hồng) trong Firefox sử dụng OpenLayers và máy chủ OSM của riêng

Question

Tôi đã đặt máy chủ OSM của riêng mình để cung cấp lát bản đồ để sử dụng trong một ứng dụng. Đối với các ứng dụng tôi sử dụng OpenLayers và đến một vấn đề lạ khi chuyển mã từ slippymap vào ứng dụng của tôi. Về cơ bản tôi sử dụng cùng một mã, và cho gạch địa phương tôi thiết lập url của máy chủ gạch của tôi.

Vấn đề là khi chuyển sang lớp địa phương, tôi chỉ thấy lớp màu hồng của bản đồ, nhưng thuộc tính src của thẻ hình ảnh sẽ tải khối thực tế. Tôi đã thử với Firebug để loại bỏ lớp màu hồng, nhưng đằng sau nó không có hình ảnh ở đó! Việc sao chép url từ thuộc tính src của thẻ img sẽ mở hình ảnh dưới dạng hình ảnh.

Đã thử điều này với Chrome và lớp Địa phương đang hoạt động, trong IE 7,8,9. Vấn đề là chỉ với FF và tôi nghi ngờ một cái gì đó với OpenLayers, nhưng không chắc chắn những gì. Lớp Mapnik đang hoạt động và hiển thị các lát trên tất cả các trình duyệt. Sử dụng HTML5 bằng cách này.

Bất kỳ ý tưởng hoặc gợi ý nào được đánh giá cao.

Answer 1

Có một giải pháp khác không yêu cầu thêm tiêu đề CORS phía máy chủ. Bạn cần cung cấp một "tileOptions" tùy chọn để cấu hình lớp, như vậy:

var layer = new OpenLayers.Layer.OSM("layer name", [urls], { 
    "tileOptions": { 
     "crossOriginKeyword": null 
    } 
}); 

Các OpenLayers tài liệu cho Layer.OSM và Tile.Image cho bạn biết làm thế nào để làm điều này, nhưng không có đề cập đến một thực tế là mặc định có thể gây ra vấn đề trong Firefox.

Answer 2

Hm, tôi gần như đoán đúng. Đó là một thiết lập tiêu đề Apache cho phép yêu cầu miền chéo cho các tài nguyên được cung cấp. Dưới đây là thông tin thêm cho những người tò mò https://developer.mozilla.org/en/http_access_control

Đây là cài đặt tiêu đề, Bao gồm nó trong < Thư mục>, < Vị trí> hoặc .htaccess tệp và kiểm tra xem bạn đã bật mod_headers chưa.

Header set Access-Control-Allow-Origin *