CORS 策略已阻止从源“null"访问图像

问题描述

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

I have JavaScript application in OpenLayers 3, and my base layer is created from local tiles. I work only in my computer so I do not know why I have CORS error.

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

来自控制台的错误消息:

error message from console:

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

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 时，图像被打开.有什么想法有什么问题吗?我以前从未遇到过这种错误.

When I double-click on image URL, image is opened. Any ideas what is wrong? I never had that error before.

推荐答案

您遇到了 CORS 错误.

You're running into a CORS error.

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

Trying to access your file using the local file system doesn't work in your case.

Origin 为空，因为它是您的本地文件系统.你能托管这个 png 文件吗?

Origin is null because it's your local file system. Could you possibly host this png file?

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

Host these files to an AWS S3 bucket instead. Then you can use the http protocol rather than the file protocol. OR setup some http server on your local system and use http to your localhost to serve the files from if you want to keep everything local.

CORS 的工作原理

这篇关于CORS 策略已阻止从源“null"访问图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！