node.js и geoserver CORS

Question

У меня есть node.js server 0.10.12 и express.js 4.8.5. Node.js - это веб-сервер, включающий openlayers 3.9.0.

Geoserver 2.1.3 обслуживает уровень WMS. Позже я реализую векторные слои.

Существует только один маршрут (страницы индекса)

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

index.js содержит

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; 

Так app.js имеет

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

Я добавил следующее для 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); 

И в index.ejs я установил мой Geoserver WMS слой, как этот

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

})

И я получаю ошибку

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.

Я пробовал много вариаций Я нашел онлайн. Я поставил код до app.use(express.static(path.join(__dirname, 'public')));. Я положил его в router.getindex.js. Еще ничего. Я не понимаю, что случилось.

Благодаря

ноты

Это работает в интернет-проводник 11. Нет ошибок, и я не могу на самом деле увидеть слой

нет ошибок в Firefox 30, но я не могу увидеть слой

В хроме 45 Я не вижу слоя, и я получаю эту ошибку

Answer 1

Забудьте 'Access-Control-Allow-Origin', '*' это огромный риск для безопасности. Вместо этого укажите имя запрашивающего домена и сохраните белый список доменов.

Я думаю, что очевидно, что ваше промежуточное ПО не устанавливает заголовки в ответе http://localhost:8080. Проверьте заголовки на сетевой панели, firebug и т. Д. И отлаживайте их. How to debug the http response headers from a HTTP call

Firefox не всегда корректно обрабатывает ошибки CORS, поэтому вы должны также проверить хром. Internet explorer работает иначе, чем другие: https://stackoverflow.com/a/22450633/607033, поэтому он принимает http://localhost:5550 как одно и то же происхождение, поэтому ваш глючный код работает в msie. Попытайтесь использовать пользовательские имена доменов, добавив файл hosts, и я уверен, что вы также получите сообщение об ошибке из msie.

редактировать - догонять с комментариями

Основная проблема с примером кода, что веб-приложение (домен: http://localhost:5550) возвращает ваши CORS заголовки.Поскольку webapp хочет получить доступ к геосервису (http://localhost:8080) в браузере, геосервер должен предоставить доступ, а не webapp. Поэтому геосервер должен возвращать заголовки CORS вместо webapp.

В соответствии с slevin невозможно использовать версию геосервера, которую они используют в настоящее время. Возможное обходное решение для добавления обратного прокси-сервера и обслуживания геосервера под подпапкой webapp или обслуживания webapp под подпапкой геосервера. Таким образом, оба они будут иметь одинаковое происхождение. Другой вариант придерживаться разных доменов, но добавить заголовки CORS в ответ geoserver с помощью обратного прокси.

Answer 2

Попробуйте, начиная с google-chrome отключить безопасность и разрешающий доступ к локальным файлам

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

Это отключит ту же политику происхождения и разрешить локальные файлы для доступа друг к другу.

Вы можете получить предупреждение о стабильности и безопасности, вы можете избежать этого для разработки.