Image from origin #39;file://#39; has been blocked from loading by Cross-Origin Resource Sharing policy:(来自“file://的图像已被跨源资源共享策略阻止加载:)
问题描述
我正在使用 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://"的图像已被跨源资源共享策略阻止加载:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:来自“file://"的图像已被跨源资源共享策略阻止加载:
基础教程推荐
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01