CORS政策已阻止从原始“空"访问图像 [英] Access to Image from origin 'null' has been blocked by CORS policy

问题描述

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

控制台错误消息:

从原点null到file:///E:/Maperitive/Tiles/vychod/10/573/352.png处的图像访问已被CORS策略阻止:无效的响应.因此，不允许访问源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服务器，如果您想将所有内容都保留在本地，请对localhost使用http来提供文件.

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政策已阻止从原始“空"访问图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！