Подтвердить что ты не робот

Node.js и геосервер CORS

У меня есть node.js-сервер 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 я установил свой слой WMS Geoserver, как этот

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="#" onclick="location.href='http://www.geo.admin.ch/internet/geoportal/' +'en/home.html'; return false;">' +'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.get index.js. Еще ничего. Я не понимаю, что не так.

Спасибо

Примечания

Это работает в Internet Explorer 11. Нет ошибок, и я действительно вижу слой

Нет ошибок в firefox 30, но я не вижу слой

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

4b9b3361

Ответ 1

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

Я думаю, что очевидно, что ваше промежуточное ПО не устанавливает заголовки в ответе http://localhost:8080. Проверьте заголовки на сетевой панели, firebug и т.д. И отлаживайте их. Как отлаживать заголовки ответов HTTP из HTTP-запроса

Firefox не обрабатывает ошибки CORS всегда правильно, поэтому вы должны также проверить хром. Internet Explorer работает по-другому: fooobar.com/questions/228067/..., поэтому он принимает http://localhost:5550 как одно и то же происхождение, поэтому ваш багги-код работает в msie. Попробуйте использовать пользовательские имена доменов, добавив файл hosts, и я уверен, что вы также получите сообщение об ошибке из msie.

edit - чтобы догнать комментарии

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

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

Ответ 2

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

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

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

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