Javascript CORS 政策已阻止从源“null”访问图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41965066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Access to Image from origin 'null' has been blocked by CORS policy
提问by Denis Stephanov
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.
我在 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
})
});
error message from console:
来自控制台的错误消息：
Access to Image at
file:///E:/Maperitive/Tiles/vychod/10/573/352.pngfrom originnullhas been blocked by CORS policy: Invalid response. Originnullis therefore not allowed access.
CORS 策略已阻止
file:///E:/Maperitive/Tiles/vychod/10/573/352.png从源访问图像null：响应无效。null因此不允许访问Origin 。
When I double-click on image URL, image is opened. Any ideas what is wrong? I never had that error before.
当我双击图像 URL 时，图像被打开。任何想法有什么问题？我以前从未有过这个错误。
回答by Jeremy Iglehart
You're running into a CORS error.
您遇到了 CORS 错误。
Trying to access your file using the local file system doesn't work in your case.
尝试使用本地文件系统访问您的文件在您的情况下不起作用。
Originis null because it's your local file system. Could you possibly hostthis png file?
Origin为 null 因为它是您的本地文件系统。你能托管这个 png 文件吗？
Suggestion:
建议：
Host these files to an AWS S3 bucket instead. Then you can use the httpprotocol rather than the fileprotocol. OR setup some http server on your local system and use httpto your localhostto serve the files from if you want to keep everything local.
将这些文件托管到 AWS S3 存储桶。然后你可以使用http协议而不是file协议。或者在您的本地系统上设置一些 http 服务器，如果您想将所有内容都保留在本地，则可以使用http它localhost来提供文件。
More Reading:
更多阅读：
回答by Kit
Under the covers there will be some form of URL loading request. You can't load images or any other content via this method from a local file system.
在幕后会有某种形式的 URL 加载请求。您无法通过此方法从本地文件系统加载图像或任何其他内容。
Your image needs to be loaded via a web server, so accessed via a proper http URL.
您的图像需要通过 Web 服务器加载，因此可以通过适当的 http URL 访问。
回答by Sadjad Esfandiari
The problem was actually solved by providing crossOrigin: nullto OpenLayers OSM source:
该问题实际上是通过向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
})
});
回答by Damien Doumer
A solution to this is to serve your code, and make it run on a server, you could use web server for chrome to easily serve your pages.
对此的解决方案是为您的代码提供服务，并使其在服务器上运行，您可以使用 chrome 的网络服务器来轻松地为您的页面提供服务。
回答by Mike
In this case the CORS problem has been caused by using the wrong source constructor in OpenLayers. ol.source.OSM is intended for accessing the default OpenStreetMap tiles from the web and for that reason defaults to crossOrigin:'anonymous'. If you are using a local source URL you should use the generic ol.source.XYZ constructor which doesn't default the crossOrigin setting (which is why setting crossOrigin:null above happened to work). And it is perfectly legitimate want to use file protocol for maps, for example on an SD card of a mobile device.
在这种情况下，CORS 问题是由在 OpenLayers 中使用错误的源构造函数引起的。ol.source.OSM 用于从 Web 访问默认的 OpenStreetMap 图块，因此默认为 crossOrigin:'anonymous'。如果您使用的是本地源 URL，您应该使用通用的 ol.source.XYZ 构造函数，该构造函数不默认设置 crossOrigin（这就是上面设置 crossOrigin:null 的原因）。并且希望将文件协议用于地图是完全合法的，例如在移动设备的 SD 卡上。
回答by Hugo Nava Kopp
I was having the exact same problem. In my case none of the above solutions worked, what did it for me was to add the following:
我遇到了完全相同的问题。在我的情况下，上述解决方案均无效，对我来说是添加以下内容：
app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
So basically, allow everything.
所以基本上，允许一切。
Bear in mind that this is safe only if running locally.
请记住，这只有在本地运行时才是安全的。
回答by S. R.
Try to bypass CORS:
尝试绕过 CORS：
For Chrome: edit shortcut or with cmd: C:\Chrome.exe --disable-web-security
对于 Chrome：编辑快捷方式或使用 cmd：C:\Chrome.exe --disable-web-security
For Firefox: Open Firefox and type about:config into the URL bar. search for: security.fileuri.strict_origin_policy set to false
对于 Firefox：打开 Firefox 并在 URL 栏中键入 about:config。搜索：security.fileuri.strict_origin_policy 设置为 false
回答by abdelhadi lebbar
To solve your error I propose this solution: to work on Visual studio code editor and install live server extension in the editor, which allows you to connect to your local server, for me I put the picture in my workspace 127.0.0.1:5500/workspace/data/pict.png and it works!
为了解决你的错误，我提出了这个解决方案：在 Visual Studio 代码编辑器上工作并在编辑器中安装实时服务器扩展，它允许你连接到本地服务器，对我来说，我把图片放在我的工作区 127.0.0.1:5500/工作区/数据/pict.png，它的工作原理！
