node.js和geoserver CORS

Question

我有node.js服务器0.10.12和express.js 4.8.5.Node.js是Web服务器,包括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.get的index.js.依然没有.我不明白什么是错的.

谢谢

笔记

这适用于Internet Explorer 11.没有错误,我实际上可以看到该图层

在firefox 30中没有错误,但我看不到该层

在chrome 45中,我看不到图层,我得到了这个错误

Answer 1

忘记'Access-Control-Allow-Origin', '*'这是一个巨大的安全风险.请改为设置请求域的名称,并维护域的白名单.

我认为很明显,您的中间件没有在http://localhost:8080响应中设置标头.检查网络面板,firebug等上的标题...并进行调试.如何从HTTP调用调试http响应头

Firefox总是不能正确处理CORS错误,所以你也应该检查chrome.Internet Explorer与其他浏览器的工作方式不同:https:http://localhost:5550//stackoverflow.com/a/22450633/607033 因此它接受相同的原点,这就是为什么你的错误代码在msie中工作的原因.尝试通过附加hosts文件来使用自定义命名域,我相信你也会从msie收到错误消息.

编辑 - 赶上评论

示例代码的主要问题是webapp(domain http://localhost:5550:)返回您的CORS头.由于webapp想要http://localhost:8080从浏览器访问geoserver(),因此geoserver应该授予访问权限而不是webapp.所以geoserver应该返回CORS头而不是webapp.

根据slevin,它们目前使用的地理服务器版本是不可能的.可能的解决方法是添加反向代理并在webapp的子文件夹下提供地理服务器,或者在地理服务器的子文件夹下提供webapp.这样他们两个都有相同的起源.另一个选择坚持使用不同的域,但使用反向代理将CORS头添加到地理服务器响应中.