OpenLayers加载在线地图跨域问题

wenjing:)

已于 2023-04-24 16:08:55 修改

阅读量1.3k

点赞数 3

分类专栏： webGIS 文章标签： arcgis

于 2023-04-19 18:23:02 首次发布

本文链接：https://blog.csdn.net/weixin_43336525/article/details/130248985

版权

webGIS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用OpenLayers的ol/layer/WebGLTile类加载在线地图瓦片时，瓦片加载不出来，在此记录一下解决过程。

先贴一下代码~

<body>
    <h2>My Map</h2>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                // webGL渲染
                new ol.layer.WebGLTile({
                    source: new ol.source.XYZ({
                        url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',                        
                    }),
                })
            ],
            view: new ol.View({
                center: [117.06667, 39.66667],
                projection: 'EPSG:4326',
                zoom: 3
            })
        })
    </script>
</body>

在这里使用的是 ArcGIS在线的瓦片，运行之后发现地图乌漆嘛黑一片，打开开发者工具发现瓦片数据已经请求过来了，但是没有显示出来，可以想到可能是出现跨域问题了。

        参考自https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

        通过在将加载图像的HTMLImageElement上设置crossorigin属性，告诉浏览器在下载图像数据时请求跨域访问。

        在这里将图层设置中使用crossOrigin: 'anonymous'（匿名的），图像成功显示，但出现一个问题，有一些瓦片显示不出来，而且报跨域的问题！

        就很纳闷，上面不是已经把跨域问题解决了吗？为什么还报错呢？接着就是一顿查！

        有人说ArcGIS Server默认服务端口由6080改成6443，协议也由http改为https。不过使用原来的http+6080访问地图服务，Server会对请求自动重定向，本地仍能访问到地图服务。但是，如果其他计算机使用http+6080访问地图服务时，浏览器会提示跨域问题。

        然后我就把代码里的http改成了https，发现瓦片果然全部加载了，而且没有出现跨域200报错，虽然地图显示了，但不知道原理是什么，又是一顿查...

顺便学习了一下跨域报错的状态码，参考自javascript - ajax跨域，这应该是最全的解决方案了 - 程序生涯 - SegmentFault 思否

跨域状态码	产生的原因	解决方法
404	服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址	后端允许options请求
405	这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象	后端关闭对应的安全配置
200	服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象。比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错	后端增加对应的头部支持
200	后台响应的http头部信息有两个Access-Control-Allow-Origin:*	建议删除代码中手动添加的*，只用项目配置中的即可

后来发现好像和ArcGIS Server重定向没有什么关系，查看瓦片地址的时候，发现很多瓦片都来自于内置缓存，想了一下之前添加crossOrigin: 'anonymous'时，也是保存代码后直接刷新了html界面，瓦片可能用的是内置缓存。清除浏览器缓存后，再次加载，解决200跨域问题！