問題描述

我正在使用 leaflet-image.js 從傳單地圖創建圖像.用于創建圖像的代碼是

你能幫我解決這個問題嗎?(而且我所有的服務器都是本地托管的.Webserver、mapserver ...)

一般情況下，一個網站中運行的javascript代碼不能訪問其他網站的資源.但是來自網站的 javascript 應該能夠訪問來自同一網站的資源.這稱為 same-origin policy，并已實施所有主流瀏覽器(不僅僅是 Chrome).

也請閱讀 https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs 和 禁用同源策略鉻 .

最快的解決方案是通過您的 localhost:8080 網站訪問圖像 - 然后，該網站中的 javascript 將能夠訪問同一網站中的圖像資源.

I'm using leaflet-image.js to create an image from a leaflet map. The code used to create the image is the one in the example at https://github.com/mapbox/leaflet-image ie

var map = L.mapbox.map('map', 'YOUR.MAPID').setView([38.9, -77.03], 14);
leafletImage(map, function(err, canvas) {
    // now you have canvas
    // example thing to do with that canvas:
    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    document.getElementById('images').innerHTML = '';
    document.getElementById('images').appendChild(img);
});

The problem is that the image seems to be blocked by some CORS security feature. Below is an image of the Google Chrome console (not that enevn in firefox it does not work)

Could you help me with that ? (Also all my server are locally hosted. Webserver, mapserver ...)

In general, javascript code running in a website cannot access resources from other websites. But a javascript from a website should be able to access resources from that same website. This is called same-origin policy, and is implemented by all major browsers (not just Chrome).

Do read also https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs and Disable same origin policy in Chrome .

The quickest solution is to have the image reachable via your localhost:8080 website - then, the javascript in that website will be able to access a image resource in the same website.

這篇關于來自“file://"的圖像已被跨源資源共享策略阻止加載:的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！