web-dev-qa-db-ja.com

Origin 'file：//'からの画像は、クロスオリジンリソース共有ポリシーによってロードがブロックされています：

Leaflet-image.jsを使用して、リーフレットマップから画像を作成しています。画像の作成に使用されるコードは、 https://github.com/mapbox/leaflet-image の例のコードです

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);
});

問題は、イメージがCORSセキュリティ機能によってブロックされているように見えることです。以下はGoogle Chromeコンソールの画像です（Firefoxのenevnでは動作しません）

enter image description here

それを手伝ってくれませんか？ （私のサーバーはすべてローカルにホストされています。Webserver、mapserver ...）

javascripthtmlcorsleaflet
11
Jason Krs

一般に、Webサイトで実行されているJavaScriptコードは、他のWebサイトのリソースにアクセスできません。ただし、WebサイトのJavaScriptは、同じWebサイトのリソースにアクセスできる必要があります。これは same-Origin policy と呼ばれ、すべての主要なブラウザー（Chromeだけでなく）によって実装されています。

https://developer.mozilla.org/en-US/docs/Same-Origin_policy_for_file:_URIs および Chromeで同じOriginポリシーを無効にする もお読みください.

最も迅速な解決策は、localhost:8080 website-次に、そのWebサイトのjavascriptは同じWebサイトの画像リソースにアクセスできます。

11
IvanSanchez

Chromeを使用してこれらの要求を許可する場合（実際には発生しません）。これは、Googleが行ったセキュリティ測定であるため、Webサイトは ' tプライベートファイルを読み取ります。

1
MortenMoulder

ヘッダーAccess-Control-Allow-Originを送信する必要があります。これはセキュリティ機能です。たとえば、すべての（js）ソーシャルプラグインは非常に安全ではありません。

1
PawelN