创建地图时出现同源策略错误

Question

我尝试运行下面的代码，使用 OpenLayers 创建地图。该代码是来自GeoServer Beginner's Guide 的示例。

代码创建了一个地图并向其中添加了几个图层。客户端代码（如下）从本地文件系统加载，图层数据从 8080 后本地运行的 Geoserver 下载。

该代码应该创建一个地图并向其添加几个图层。第二层由addGeoRSS 函数添加。第一层添加成功，但添加第二层失败并出现以下错误

跨域请求被阻止：同源策略不允许读取位于http://localhost:8080/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox=-74.0118315772888,40.70754683896324,-74.00153046439813,40.719885123828675&width=427&height=512&srs=EPSG:4326&format=application%2Frss%2Bxml 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。

鉴于两个图层都是从同一主机下载的，我预计它们都会失败，为什么只有第二个会导致问题？

var GEOSERVERBASE = "http://localhost:8080";
var CountyLayer = 'tiger:tl_2011_us_county';
var map;

function mapinitialize() {

    map = new OpenLayers.Map('map', {
        maxResolution:'auto',
        projection: 'EPSG:4326'
    });
    layer = new OpenLayers.Layer.WMS(
        CountyLayer, GEOSERVERBASE + "/geoserver/tiger/wms",
        {
            layers: CountyLayer,
            format: 'image/png'
        }
    );

    // first (successful) request to Geoserver running at http://localhost:8080
    map.addLayer(layer);
    map.zoomTo(9);
    map.panTo(new OpenLayers.LonLat(-73.99, 40.75)); 

    // second request to Geoserver that causes a CORS error
    addGeoRSS();
}

function addGeoRSS() {

    var value = GEOSERVERBASE + '/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox=-74.0118315772888,40.70754683896324,-74.00153046439813,40.719885123828675&width=427&height=512&srs=EPSG:4326&format=application%2Frss%2Bxml';
    var georss = new OpenLayers.Layer.GeoRSS('Tiger POI', value);
    map.addLayer(georss);
}

Answer 1

您的第一层请求是对图像 (.png) 的请求，并且图像不受 CORS 限制。然而，CORS 错误的原因仍然是您使用 file:// 加载客户端代码，然后尝试使用 http:// 加载（非图像）资源