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政策阻止：响应无效。因此，不允许原始null访问。

当我双击图片网址时，图片会被打开。有什么想法有什么不对？我之前从未遇到过这个错误。

Answer 1

您遇到了CORS错误。

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

Origin为空，因为它是您的本地文件系统。你可能主持这个png文件吗？

建议：

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

更多阅读：

How CORS Works

Answer 2

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

您的图片需要通过网络服务器加载，因此可以通过正确的http网址进行访问。

Answer 3

通过向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 4

为解决您的错误，我提出了以下解决方案：在Visual Studio代码编辑器上工作并在编辑器中安装实时服务器扩展，该扩展允许您连接到本地服务器，对我来说，我将图片放在工作区127.0.0.1中：5500 / workspace / data / pict.png即可使用！

Answer 5

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

Answer 6

在这种情况下，CORS问题是由OpenLayers中使用错误的源构造函数引起的。 ol.source.OSM用于从Web访问默认的OpenStreetMap切片，因此默认为crossOrigin：'anonymous'。如果您使用的是本地源URL，则应使用通用的ol.source.XYZ构造函数，该构造函数不会默认使用crossOrigin设置（这就是为什么在上面设置crossOrigin：null起作用的原因）。想要在地图上使用文件协议是完全合法的，例如在移动设备的SD卡上。

Answer 7

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

安装 Python 后，进入提供项目的文件夹，例如 cd my-project/。然后使用 python -m SimpleHTTPServer 这将使 index.html 及其 JavaScript 文件在 localhost:8000 可用。

Answer 8

尝试绕过CORS：

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

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

Answer 9

fileaver.js遇到相同的问题所以，我调查了一些原因，

如果您没有正确的HTML标头。
如果标题中有一个标签可以阻止外部请求
如果未授予文件许可权（您可以在cpanel中进行设置）
如果您访问了http：//网站，并且向https：//

，最后一个为我正常工作。我将网址从https：//更改为http：//，对我来说很好用。

Answer 10

我遇到了完全相同的问题。就我而言，上述解决方案均无效，对我来说，添加以下内容是

app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()

因此，基本上，允许一切。

请记住，这只有在本地运行时才是安全的。

Answer 11

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

从原点访问图像＆＃39; null＆＃39;已被CORS政策阻止

11 个答案:

建议：

更多阅读：