Question node.js et geoserver CORS


J'ai le serveur node.js 0.10.12 et express.js 4.8.5. Node.js est le serveur Web, inclut openlayers 3.9.0.

Geoserver 2.1.3 dessert la couche WMS. Plus tard, je mettrai en œuvre des couches vectorielles.

Il n'y a qu'un seul itinéraire (pour la page d'index)

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

le index.js contient

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;

Alors le app.js a

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')));

J'ai ajouté ce qui suit pour 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);

Et dans le index.ejs Je règle ma couche Geoserver WMS comme ceci

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'
 })

})

Et j'ai l'erreur

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.

J'ai essayé beaucoup de variations que j'ai trouvées en ligne. Je mets le code avant le app.use(express.static(path.join(__dirname, 'public')));. Je l'ai mis à l'intérieur du router.get du index.js. Toujours rien. Je n'arrive pas à comprendre ce qui ne va pas.

Merci

Remarques

Cela fonctionne dans Internet Explorer 11. Pas d'erreurs et je peux réellement voir la couche

Aucune erreur dans Firefox 30 mais je ne peux pas voir la couche

En chrome 45 je ne peux pas voir la couche et je reçois cette erreur


13
2017-09-28 13:06


origine


Réponses:


Oublier 'Access-Control-Allow-Origin', '*' c'est un énorme risque de sécurité. Définissez le nom du domaine demandeur à la place et gérez une liste blanche de domaines.

Je pense qu'il est évident que votre middleware ne définit pas les en-têtes dans le http://localhost:8080 réponse. Vérifiez les en-têtes sur le panneau de réseau, le firebug, etc ... et déboguez-le. Comment déboguer les en-têtes de réponse http d'un appel HTTP

Firefox ne gère pas toujours correctement les erreurs CORS, vous devriez donc également vérifier le chrome. Internet Explorer fonctionne différemment des autres: https://stackoverflow.com/a/22450633/607033 donc il accepte http://localhost:5550 comme même origine, c'est pourquoi votre code buggy fonctionne en msie. Essayez d'utiliser des domaines nommés personnalisés en ajoutant le fichier hosts, et je suis sûr que vous obtiendrez également un message d'erreur de msie.

edit - pour rattraper les commentaires

Le problème principal avec l'exemple de code, que la webapp (domaine: http://localhost:5550) renvoie vos en-têtes CORS. Depuis que la webapp veut accéder au géoserver (http://localhost:8080) à partir du navigateur, le géoserveur doit accorder l’accès et non l’application Web. Le géoserveur doit donc renvoyer les en-têtes CORS au lieu de l'application Web.

Selon slevin, ce n'est pas possible avec la version de géoserver qu'ils utilisent actuellement. Solution possible pour ajouter un proxy inverse et servir le géoserveur sous un sous-dossier de l'application Web ou servir l'application Web sous un sous-dossier du géoserveur. De cette façon, ils auraient tous deux la même origine. Une autre option pour coller à différents domaines, mais ajoutez les en-têtes CORS à la réponse du géoserver en utilisant le proxy inverse.


7
2017-09-29 02:04



Essayez de commencer google-chrome avec désactiver la sécurité et autoriser l'accès aux fichiers locaux

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

Cela désactivera la même politique d'origine et permettra aux fichiers locaux d'accéder les uns aux autres.

Vous pourriez avoir un avertissement de stabilité et de sécurité, vous pouvez éviter cela pour le développement.


-2
2017-10-02 14:52