关于 javascript：CORS 策略已阻止从源”null”访问图像


Access to Image from origin 'null' has been blocked by CORS policy

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    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
    })
});

来自控制台的错误消息：

Access to Image at file:///E:/Maperitive/Tiles/vychod/10/573/352.png from origin null has been blocked by CORS policy: Invalid response. Origin null is therefore not allowed access.

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

相关讨论

您遇到了 CORS 错误。

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

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

建议：

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

更多阅读：

CORS 的工作原理

相关讨论

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

1
2
3
4
5
6
var newLayer = new ol.layer.Tile({
source: new ol.source.OSM({
    url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png',
    crossOrigin: null
    })
});
相关讨论

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

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

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

相关讨论

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

相关讨论

尝试绕过 CORS：

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

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

相关讨论

我遇到了完全相同的问题。就我而言，上述解决方案都不起作用，对我来说是添加以下内容：

1
2
3
4
app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()

所以基本上，允许一切。

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

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

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

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

相关讨论

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