node.js e geoserver CORS

Question

Ho server node.js 0.10.12 e express.js 4.8.5. Node.js è il server web, include gli openlayer 3.9.0.

Geoserver 2.1.3 serve il livello WMS. Successivamente, implementerò i livelli vettoriali.

C'è solo un percorso (per la pagina di indice)

var routes = require('./routes/index'); 

Il index.js contiene

var express = require('express'); 
var router = express.Router(); 

router.get('/', function(req, res, next) { 
    res.render('index', { title: 'openlayers3 testing', head: 'Welcome' }); 
    next(); 
}); 

module.exports = router; 

Così il app.js ha

var routes = require('./routes/index');//explained above 

var app = express(); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 

app.use(favicon()); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded()); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

ho aggiunto il seguente per CORS

app.use(function (req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); 
    res.setHeader('Access-Control-Allow-Credentials', true); 
    next(); 
}); 


app.get('/', routes); 

E nel index.ejs ho impostato il mio strato Geoserver WMS come questo

var ait = new ol.layer.Tile({ 
extent: textent, 
source: new ol.source.TileWMS({ 
    url: 'http://localhost:8080/geoserver/mymap/wms', 
    crossOrigin: 'anonymous', 
    attributions: [new ol.Attribution({ 
    html: '&copy; ' +'<a href="http://www.geo.admin.ch/internet/geoportal/' +'en/home.html">' +'National parks/geo.admin.ch</a>' 
    })], 
    params: {'LAYERS': 'mymap:planet_osm_polygon, mymap:planet_osm_line, mymap:planet_osm_roads, mymap:planet_osm_point'}, 
    serverType: 'geoserver' 
}) 

})

E ottengo l'errore

Image from origin 'http://localhost:8080' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5550' is therefore not allowed access.

Ho provato un sacco di varianti Ho trovato online. Inserisco il codice prima dello app.use(express.static(path.join(__dirname, 'public')));. L'ho inserito all'interno dello router.get dello index.js. Ancora niente. Non riesco a capire cosa c'è che non va.

Grazie

note

Questo funziona in Internet Explorer 11. Nessun errore e posso effettivamente vedere lo strato

Nessun errore in Firefox 30, ma non riesco a vedere lo strato

In chrome 45 Non riesco a vedere il livello e ottengo quell'errore

Answer 1

Dimentica 'Access-Control-Allow-Origin', '*' è un enorme rischio per la sicurezza. Impostare invece il nome del dominio richiedente e mantenere una whitelist dei domini.

Penso che sia ovvio che il middleware non imposta le intestazioni nella risposta http://localhost:8080. Controlla le intestazioni sul pannello di rete, firebug, ecc ... e fai il debug. How to debug the http response headers from a HTTP call

Firefox non gestisce gli errori CORS sempre correttamente, quindi è consigliabile controllare anche Chrome. Internet Explorer funziona in modo diverso dagli altri: https://stackoverflow.com/a/22450633/607033 quindi accetta http://localhost:5550 come stessa origine, ecco perché il tuo codice buggy funziona in msie. Prova ad usare domini con nome personalizzati aggiungendo il file hosts, e sono sicuro che riceverai anche il messaggio di errore di msie.

Modifica - al passo con i commenti

Il problema principale con il codice di esempio, che il webapp (dominio: http://localhost:5550) riporta il CORS intestazioni.Poiché la webapp vuole accedere al geoserver (http://localhost:8080) dal browser, il geoserver dovrebbe concedere l'accesso e non l'app web. Quindi il geoserver dovrebbe restituire le intestazioni CORS invece della webapp.

Secondo Slevin non è possibile con la versione di GeoServer che attualmente utilizzano. Una possibile soluzione alternativa per aggiungere un proxy inverso e servire il geoserver in una sottocartella dell'app Web o servire l'applicazione web in una sottocartella del geoserver. In questo modo avrebbero entrambi la stessa origine. Un'altra opzione per restare con domini diversi, ma aggiungere le intestazioni CORS alla risposta geoserver utilizzando il proxy inverso.

Answer 2

Prova a partire google-chrome con la sicurezza disabilitare e consentendo l'accesso per i file locali

google-chrome --disable-web-security --allow-file-access-from-files 

Questo consente di disattivare la stessa politica di origine e di consentire ai file locali di accedere a vicenda.

Si potrebbe ottenere stabilità e di avviso di protezione, si può evitare che per lo sviluppo.