Error 'Access-Control-Allow-Origin' al definir la capa wfs en OpenLayers 3

Question

Quiero crear una capa wfs en OpenLayers 3. Lo defino como sigue:

sourceVector = new ol.source.Vector({
    loader: function(extent) {
        $.ajax('http://localhost:8080/geoserver/iran/wfs?service=WFS',{
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'iran:capital',
                srsname: 'EPSG:4326',
                bbox: extent.join(',') + ',EPSG:4326'
                },
            }).done(loadFeatures);
        },
        strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({
            maxZoom: 19
            })),
    });

window.loadFeatures = function(response) {
    formatWFS = new ol.format.WFS(),
    sourceVector.addFeatures(formatWFS.readFeatures(response));
    };

wfs = new ol.layer.Vector({
    source: sourceVector,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
        })
    })
});

Pero cuando ejecuto el proyecto, me encuentro con este error:

X http://localhost:8080/geoserver/iran/wfs?service=WFS&service=WFS&version=1 .…3702828511596%2C0%2C6.02966565566021e-11%2C76.43702828517625%2CEPSG%3A4326. La cabecera 'Access-Control-Allow-Origin' no está presente en el recurso solicitado. solicitado. Origen ' http://localhost por lo que no se permite un

este problema estaba en OpenLayers 2, pero lo solucioné de la siguiente manera:

He creado un proxy.cgi con los siguientes valores:

#!C:/Python27/python.exe -u

"""This is a blind proxy that we use to get around browser
restrictions that prevent the Javascript from loading pages not on the
same server as the Javascript.  This has several problems: it's less
efficient, it might break some sites, and it's a security risk because
people can use this proxy to browse the web and possibly do bad stuff
with it.  It only loads pages via http and https, but it can load any
content type. It supports GET and POST requests."""

import urllib2
import cgi
import sys, os

# Designed to prevent Open Proxy type stuff.

allowedHosts = ['www.openlayers.org', 'openlayers.org', 
                'labs.metacarta.com', 'world.freemap.in', 
                'prototype.openmnnd.org', 'geo.openplans.org',
                'sigma.openplans.org', 'demo.opengeo.org',
                'www.openstreetmap.org', 'sample.azavea.com',
                'v2.suite.opengeo.org', 'v-swe.uni-muenster.de:8080',
                'vmap0.tiles.osgeo.org', 'www.openrouteservice.org',
                'maps.wien.gv.at', 'localhost:8080']

method = os.environ["REQUEST_METHOD"]

if method == "POST":
    qs = os.environ["QUERY_STRING"]
    d = cgi.parse_qs(qs)
    if d.has_key("url"):
        url = d["url"][0]
    else:
        url = "http://www.openlayers.org"
else:
    fs = cgi.FieldStorage()
    url = fs.getvalue('url', "http://www.openlayers.org")

try:
    host = url.split("/")[2]
    if allowedHosts and not host in allowedHosts:
        print "Status: 502 Bad Gateway"
        print "Content-Type: text/plain"
        print
        print "This proxy does not allow you to access that location (%s)." % (host,)
        print
        print os.environ

    elif url.startswith("http://") or url.startswith("https://"):

        if method == "POST":
            length = int(os.environ["CONTENT_LENGTH"])
            headers = {"Content-Type": os.environ["CONTENT_TYPE"]}
            body = sys.stdin.read(length)
            r = urllib2.Request(url, body, headers)
            y = urllib2.urlopen(r)
        else:
            y = urllib2.urlopen(url)

        # print content type header
        i = y.info()
        if i.has_key("Content-Type"):
            print "Content-Type: %s" % (i["Content-Type"])
        else:
            print "Content-Type: text/plain"
        print

        print y.read()

        y.close()
    else:
        print "Content-Type: text/plain"
        print
        print "Illegal request."

except Exception, E:
    print "Status: 500 Unexpected Error"
    print "Content-Type: text/plain"
    print 
    print "Some unexpected error occurred. Error text was:", E

y luego puse OpenLayers.proxyHost a OpenLayers.ProxyHost = "proxy.cgi?url";

¿Cómo puedo hacer en OpenLayers 3 para este problema (Uso Apachea en el lado del servidor) ?

Answer 1

Puede activar CORS en el servidor Apache. En la práctica esto es más rápido que usar un ProxyPass. Habilitar un filtro Catalina en Apache Tomcat es muy simple. Incluyendo el reinicio esto debería hacerse en 2 minutos.

He aquí una enlace para habilitar CORS en Apache Tomcat.

He utilizado el mismo artículo para activar CORS en mi propio dev Geoserver alojado en Openshift.

Answer 2

Crear un Apache ProxyPass

ProxyPass /geoserver http://localhost:8080/geoserver
ProxyPassReverse /geoserver http://localhost:8080/geoserver

y luego usa /geoserver en tu código javascript.