CORS 政策已阻止从源“null”访问图像

IT技术 javascript cors local openlayers-3
2021-03-10 03:35:57

我在 OpenLayers 3 中有 JavaScript 应用程序，我的基础层是从本地图块创建的。我只在我的电脑上工作，所以我不知道为什么我有 CORS 错误。

    var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png'
    })
});
var schladming = [21.6187, 48.7327]; // longitude first, then latitude
// since we are using OSM, we have to transform the coordinates...
var schladmingWebMercator = ol.proj.fromLonLat(schladming);

var map = new ol.Map({
    layers: [
        newLayer
    ],
    controls: [],
    target: 'mapid',
    view: new ol.View({
        center: schladmingWebMercator,
        zoom: 10,
        minZoom: 10,
        maxZoom: 14
    })
});

来自控制台的错误消息：

CORS 策略已阻止file:///E:/Maperitive/Tiles/vychod/10/573/352.png 从源访问图像null：响应无效。null因此不允许访问Origin 。

当我双击图像 URL 时，图像被打开。任何想法有什么问题？我以前从未有过这个错误。

6个回答

您遇到了 CORS 错误。

尝试使用本地文件系统访问您的文件在您的情况下不起作用。

Origin为 null 因为它是您的本地文件系统。你能托管这个 png 文件吗？

建议：

将这些文件托管到 AWS S3 存储桶。然后你可以使用http协议而不是file协议。或者在您的本地系统上设置一些 http 服务器，如果您想将所有内容都保留在本地，则可以使用http它localhost来提供文件。

更多阅读：

CORS 的工作原理

但这并没有真正解决[防止 JS 病毒] 的问题。如果您的工作是制作恶意软件、base64 编码图像（实际上是任何二进制文件）并将所有内容构建到单个 html 块文件中实际上非常简单，那么您就没有更多的 CORS 块了。Webpack 非常适合这类东西。我觉得所有这一切都让业余爱好者的生活变得艰难，同时并没有真正阻止任何真正意图编写 JS 恶意软件的人，但我可能在这里没有看到明显的东西。
2021-05-01 03:35:57
所以我自己创建并从 localhost (as file:///)采购的图像现在对我构成威胁？标准委员会疯了吗？
2021-05-05 03:35:57
我认为这更多地是为了保护您免受 USB 记忆棒或其他类型的想要在浏览器中运行的恶意代码自动启动到浏览器的影响。
2021-05-08 03:35:57

该问题实际上是通过向OpenLayers OSM 源提供crossOrigin: null来解决的：

var newLayer = new ol.layer.Tile({
source: new ol.source.OSM({
    url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png',
    crossOrigin: null
    })
});
看起来更像是一个聪明的黑客而不是一个预期的解决方案。不过还是不错的。
2021-04-18 03:35:57
请你能提供更多细节吗？
2021-05-02 03:35:57

在幕后，会有某种形式的 URL 加载请求。您无法通过此方法从本地文件系统加载图像或任何其他内容。

您的图像需要通过 Web 服务器加载，因此可以通过正确的 http URL 访问。

为了解决你的错误，我提出了这个解决方案：在 Visual Studio 代码编辑器上工作并在编辑器中安装实时服务器扩展，它允许你连接到本地服务器，对我来说，我把图片放在我的工作区 127.0.0.1:5500/工作区/数据/pict.png，它的工作原理！

太棒了，刚安装了实时服务器扩展，然后在代码编辑器中打开主页 html 文件，并在 Visual Studio 代码编辑器的状态栏中输入 Go Live 并完成网站工作。
2021-04-19 03:35:57

对此的解决方案是为您的代码提供服务，并使其在服务器上运行，您可以使用 chrome 的网络服务器来轻松地为您的页面提供服务。

你能解释为什么这可以解决问题吗？请记住，一个好的解释有助于其他人从你的答案中学习
2021-04-27 03:35:57
其它你可能感兴趣的问题
上一篇未捕获的 TypeError：Object.values 不是函数 JavaScript 下一篇scrollIntoView 是否适用于所有浏览器？