CORS 策略已阻止从源“null”访问图像答案

【问题标题】：Access to Image from origin 'null' has been blocked by CORS policyCORS 策略已阻止从源“null”访问图像
【发布时间】：2017-06-17 07:57:24
【问题描述】：

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

来自控制台的错误消息：

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

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

【问题讨论】：

file:// 协议不适用于 CORS - 只有其中的一部分有效，例如 http:// 等。
但我只在一个域中工作还是我错了？我该如何解决？
我在 vs 代码上使用实时服务器，但它不适合我。我也遇到了同样的错误。

标签： javascript cors local openlayers-3

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您遇到了 CORS 错误。

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

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

建议：

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

更多阅读：

How CORS Works

【讨论】：

所以我自己创建并从本地主机（file:///）采购的图像现在对我构成威胁？标准委员会疯了吗？
我认为这更多地是为了保护您免受那些从 USB 记忆棒或其他类型的想要在浏览器中运行的恶意代码自动启动到浏览器中的东西。
这并没有真正解决[防止JS病毒]的问题。如果您的工作是制作恶意软件、base64 编码图像（实际上是任何二进制文件）并将所有内容构建到单个 html 块文件中实际上非常简单，那么您就没有更多的 CORS 块了。 Webpack 非常适合这类东西。我觉得这一切只会让业余爱好者的生活变得艰难，同时并没有真正阻止任何真正意图编写 JS 恶意软件的人，但我可能在这里没有看到明显的东西。

【解决方案3】：

尝试绕过 CORS：

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

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

【讨论】：

这可能会成为一个安全问题，尤其是当您在禁用 CORS 的同一浏览器上使用网络时。或者，我听说有人下载单独安装的 chrome 仅用于开发工作。
--disable-web-security 不适用于本地文件
这不适用于访问您网站的其他人

【解决方案4】：

问题实际上是通过向 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
    })
});

【讨论】：

看起来更像是一个聪明的黑客而不是预期的解决方案。不过还是不错的。
能否提供更多细节？

【解决方案5】：

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

【讨论】：

您能解释一下为什么这样可以解决问题吗？请记住，一个好的解释可以帮助其他人从你的答案中学习

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

所以基本上，允许一切。

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

【讨论】：

【解决方案8】：

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

【讨论】：

很好用，刚刚安装了实时服务器扩展，然后在代码编辑器中打开主页 html 文件并在 Visual Studio 代码编辑器的状态栏中输入 Go Live 并完成网站工作。

【解决方案9】：

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

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

【讨论】：

在 Windows 上已重命名：python -m http.server

【解决方案10】：

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

【讨论】：