CORS策略阻止了对来自"null"的映像的访问

Question

我在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因此不允许原点访问.

当我双击图像URL时,图像被打开.有什么想法有什么不对？我之前从未遇到过这个错误.

Answer 1

对于本地开发，您可以使用简单的 Web 服务器来提供文件。

安装 Python 2.7 后，进入项目所在的文件夹，例如cd my-project/. 然后使用python -m SimpleHTTPServer它可以使index.htmlJavaScript 文件在localhost:8000.

编辑：对于 Python 3 使用python -m http.server

Answer 2

您遇到了CORS错误.

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

Origin为null,因为它是您的本地文件系统.你能举办这个png文件吗？

建议:

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

更多阅读:

CORS如何工作

Answer 3

尝试绕过 CORS：

对于 Chrome：编辑快捷方式或使用 cmd：C:\Chrome.exe --disable-web-security

对于 Firefox：打开 Firefox 并在 URL 栏中输入 about:config。搜索：security.fileuri.strict_origin_policy 设置为 false

Answer 4

在封面下将有某种形式的URL加载请求.您无法从本地文件系统通过此方法加载图像或任何其他内容.

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

Answer 5

通过向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
    })
});

Answer 6

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

Answer 7

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

Answer 8

如果在 vs code 中使用 vs code，只需安装实时服务器并启用它，它解决了我的问题。