Question

    <script type="text/javascript">
        var vectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url:    "http://localhost/cgi-bin/mapserv.exe?map=D:\MS4W\Apache\htdocs\baseWFS.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=getfeature&TYPENAME=parcel&bbox=518259.145000,3240058.724100,519352.395700,3241604.305400,EPSG:4326&outputformat=geojson",
            strategy: ol.loadingstrategy.all
        });

        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 0, 1.0)',
                    width: 2
                })
            })
        });
        var map = new ol.Map({
            layers: [vector],
            view: new ol.View({
                center: [518744, 3240850],
                maxZoom: 10,
                zoom : 1            
            }),
            target: document.getElementById('map')
        });

我写了这个js代码但它没有显示任何内容并且有这个错误：跨源请求已阻止：同源策略禁止在http://localhost/cgi-bin/mapserv.exe?map=D:MS4WApachehtdocsLIS_project%08aseWFS.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=getfeature&TYPENAME=parcel&bbox=518259.145000,3240058.724100,519352.395700,3241604.305400,EPSG:4326&outputformat=geojson读取远程资源。（原因：缺少CORS标题'Access-Control-Allow-Origin'。

Answer 1

这是服务器方面的问题。允许服务器端的客户端域。另请查看此https://enable-cors.org/server.html

Answer 2

只需将CORS插件添加到chrome，使用以下链接并从chrome启用它。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

它只是减少了手动操作的痛苦。

Answer 3

RE：“这很直，在提出请求时丢失了CORS标题。请从客户端添加CORS !! ?? ......”不，你建议我一遍又一遍地看到一个基本的菜鸟错误... CORS（跨源资源共享）是服务器说“我会接受您的请求，即使您来自不同的来源”的一种方式。 Web API服务在SERVER端口5000上运行，CLIENT在端口4200上运行......这需要SERVER的合作和配置 - 所以如果您不能修改SERVER（例如，如果您使用的是外部API），这种方法将不会工作。有些人建议在CLIENT浏览器上禁用CORS安全选项以用于开发目的......但是，当您将前门拉开时，仍然不建议这样做并且风险很大。

js代码中的CORS错误

3 个答案: