我在OpenLayers3中有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策略阻止：响应无效。因此，不允许访问Origin。

当我双击图像URL时，图像将被打开。有什么问题吗？我以前从未有过这样的错误。

---

顺晟科技：

如果在vs代码中使用vs代码并启用它，只需安装live server，它解决了我的问题。

我也有同样的问题。在我的例子中，上面的解决方案都不起作用，我需要添加以下内容:

    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错误。

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

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

建议:

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

更多阅读:

CORS如何工作

浏览器位于请求文件的本地文件系统中。请求是通过XHR提出的。因此原点被称为null。如果在CORS支持的协议方案列表中添加了“null”，您将访问它。但遗憾的是你不能。

尝试绕过CORS:

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

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

为了解决您的错误，我提出了以下解决方案：要使用Visual studio代码编辑器并在编辑器中安装live server extension（允许您连接到本地服务器），我将图片放在工作区127.0.0.1:5500/workspace/data/pict.png中，它可以工作！

通过向OpenLayers OSM源代码提供CrossOrigin:null

实际上解决了这个问题:

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

隐藏的是某种形式的URL加载请求。不能通过此方法从本地文件系统加载图像或任何其他内容。

您的图像需要通过web服务器加载，以便通过正确的http URL访问。

在本例中，CORS问题是由于在OpenLayers中使用了错误的源构造函数造成的。Ol.source.osm用于从web访问默认的OpenStreetMap瓷砖，因此默认为CrossOrigin：“Anonymous”。如果您使用的是本地源URL，则应该使用通用的ol.source.xyz构造函数，它不默认crossOrigin设置（这就是为什么上面设置crossOrigin：null会起作用）。使用文件协议进行映射是完全合法的，例如在移动设备的SD卡上。

解决这个问题的方法是为您的代码提供服务，并使其在服务器上运行，您可以使用web server for chrome来轻松地为您的页面提供服务。

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

安装了Python 2.7后，进入项目所在的文件夹，例如。然后使用它，这将使它的JavaScript文件在。

中可用

编辑:对于Python 3使用