OpenLayers 从其他站点加载 GML 文件答案

【问题标题】：OpenLayers loading a GML file from an other siteOpenLayers 从其他站点加载 GML 文件
【发布时间】：2011-05-30 21:37:34
【问题描述】：

我在将 GML 文件加载到 OpenLayers 时遇到了困难。我已将问题简化为以下内容： - 复制/粘贴示例：http://openlayers.org/dev/examples/behavior-fixed-http-gml.html - 替换所有绝对链接

这导致我从 localhost (file:///) 运行以下文件/代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>OpenLayers Vector Behavior Example</title>
        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
        <script src="http://openlayers.org/dev/OpenLayers.js"></script>

        <script type="text/javascript">
            var map;

            function init(){
                map = new OpenLayers.Map('map');
                var wms = new OpenLayers.Layer.WMS(
                    "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'}
                );

                var layer = new OpenLayers.Layer.Vector("GML", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "http://openlayers.org/dev/examples/gml/polygon.xml",
                        format: new OpenLayers.Format.GML()
                    })
                });

                map.addLayers([wms, layer]);
                map.zoomToExtent(new OpenLayers.Bounds(
                    -3.92, 44.34, 4.87, 49.55
                ));
            }
        </script>
    </head>
    <body onload="init()">
        <h1 id="title">Vector Behavior Example (Fixed/HTTP/GML)</h1>
        <div id="tags">
            vector, strategy, strategies, protocoll, advanced, gml, http, fixed
        </div>
        <p id="shortdesc">

            Vector layer with a Fixed strategy, HTTP protocol, and GML format.
        </p>
        <div id="map" class="smallmap"></div>
        <div id="docs">
            The vector layer shown uses the Fixed strategy, the HTTP protocol,
            and the GML format.
            The Fixed strategy is a simple strategy that fetches features once
            and never re-requests new data.
            The HTTP protocol makes requests using HTTP verbs.  It should be
            constructed with a url that corresponds to a collection of features
            (a resource on some server).
            The GML format is used to serialize features.
        </div>
    </body>
</html>

问题是 GML 没有显示（其他一切都很好）。我在控制台中没有错误，但请求的状态为 200 OK（在 FF 控制台和 FireBug 网络选项卡中）。我错过了什么？同源策略失败应该会显示一些错误，不是吗？

【问题讨论】：

标签： javascript openlayers same-origin-policy gml-geographic-markup-lan

【解决方案1】：

它确实在 Chrome 中给出了 Access-Control-Allow-Origin 错误。

XMLHttpRequest 无法加载 http://openlayers.org/dev/examples/gml/polygon.xml。原点http://fiddle.jshell.net 不是允许访问控制允许来源。

对于 FF，它确实如您所述给出了 200 响应代码，但响应不包含数据。

http://jsfiddle.net/niklasvh/F76Hp/3/

【讨论】：

响应在 FireBug 中不包含数据，但在 Wireshark 中包含，所以我打算在 Firebug 中查找错误。无论如何，非常感谢您的回答。关于如何进行的任何建议？
您可以使用代理，例如使用 jsonp 获取请求：developer.yahoo.com/yql/console/#h=select%20*%20from%20xml%20where%20url%3D%27http%3A//openlayers.org/dev/examples/ gml/polygon.xml%27
我确实明白它为什么起作用：雅虎服务器返回以下标头：Access-Control-Allow-Origin: *

【解决方案2】：

为了保护用户免受脚本向远方服务器发送信息的影响，有一个“同源策略”，它规定您只能通过 HTTP 请求从与您当前查看的页面相同的服务器接收数据。

这就解释了为什么wireshark有信息，而firebug没有：浏览器不允许传输信息。

JSON-P 是解决这个问题的技巧：

http://en.wikipedia.org/wiki/JSONP

如果您无权访问 JSONP 源或不想要 JSONP 方法，则必须使用代理，它将您的请求转发到遥远的服务器并返回信息，就好像它来自您的自己的服务器。浏览器将无法判断通信最终将发送到远处的服务器，并允许 HTTP 请求。

【讨论】：