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

来自控制台的错误消息：

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

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

原文由 Denis Stephanov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您遇到了 CORS 错误。

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

Origin 为空，因为它是您的 本地文件系统。您可以 托管 此 png 文件吗？

建议：

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

更多阅读：

CORS 的工作原理

原文由 Jeremy Iglehart 发布，翻译遵循 CC BY-SA 3.0 许可协议