从来源“null”访问图像已被 CORS 策略阻止

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 时，图像将被打开。任何想法有什么问题吗？我以前从未遇到过这个错误。

Answer 1

您遇到了 CORS 错误。

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

Origin

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

建议：

将这些文件托管到 AWS S3 存储桶。 那么您可以使用

http

协议而不是

file

协议。 或者在本地系统上设置一些 http 服务器，如果您想将所有内容保留在本地，请使用

http

到您的

localhost

来提供文件。

更多阅读：

CORS 的工作原理

Answer 2

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

安装了 Python 2.7 后，进入项目所在的文件夹，如

cd my-project/

。然后使用

python -m SimpleHTTPServer

这将使

index.html

及其 JavaScript 文件在

localhost:8000

可用。

编辑： 对于 Python 3 使用

python -m http.server

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

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

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

Answer 6

尝试绕过 CORS：

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

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

Answer 7

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

Answer 8

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

Answer 9

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

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

所以基本上，允许一切。

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

Answer 10

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

Answer 11

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