Javascript 来自源“file://”的图像已被跨源资源共享策略阻止加载：
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37768518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy:
提问by Jason Krs
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-imageie
我正在使用 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);
});
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)
问题是该图像似乎被某些 CORS 安全功能阻止了。下面是 Google Chrome 控制台的图像（不是 firefox 中的 enevn 它不起作用）
Could you help me with that ? (Also all my server are locally hosted. Webserver, mapserver ...)
你能帮我解决这个问题吗？（而且我所有的服务器都在本地托管。网络服务器，地图服务器......）
采纳答案by IvanSanchez
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).
一般来说，在一个网站上运行的javascript代码无法访问其他网站的资源。但是来自网站的 javascript 应该能够访问来自同一网站的资源。这称为同源策略，并由所有主要浏览器（不仅仅是 Chrome）实现。
Do read also https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIsand Disable same origin policy in Chrome.
也请阅读https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs和Disable same origin policy in Chrome。
The quickest solution is to have the image reachable via your localhost:8080website - then, the javascript in that website will be able to access a image resource in the same website.
最快的解决方案是通过您的localhost:8080网站访问图像- 然后，该网站中的 javascript 将能够访问同一网站中的图像资源。
回答by MortenMoulder
You need to upload the files to a web server, if you want Chrome to allow these requests (which doesn't actually happen). This is a security measurement made by Google, so websites can't read your private files.
如果您希望 Chrome 允许这些请求（实际上并没有发生），您需要将文件上传到网络服务器。这是 Google 进行的一项安全措施，因此网站无法读取您的私人文件。
回答by PawelN
You need to send header Access-Control-Allow-Origin and maybe few more. This is security feature, without it, for example, all (js) social plugins will be extremely unsafe.
您需要发送标头 Access-Control-Allow-Origin ，也许还有更多。这是安全功能，没有它，例如，所有（js）社交插件都会非常不安全。
