node.js 和地理服务器 CORS

Question

我有 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 中，我将我的 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'))); 之前。我把它放在index.js的router.get里面了。依然没有。我不明白哪里出了问题。

谢谢

笔记

这在 Internet Explorer 11 中有效。没有错误，我实际上可以看到图层

在 firefox 30 中没有错误，但我看不到图层

在 chrome 45 中，我看不到图层，我得到了那个错误

Answer 1

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

我认为您的中间件显然没有在 http://localhost:8080 响应中设置 headers。检查网络面板上的 headers、firebug 等...并进行调试。 How to debug the http response headers from a HTTP call

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

编辑-赶上评论

示例代码的主要问题是 Web 应用程序（域：http://localhost:5550）return 是您的 CORS headers。由于 webapp 想要从浏览器访问 geoserver (http://localhost:8080)，geoserver 应该授予访问权限而不是 webapp。所以地理服务器应该 return CORS headers 而不是 webapp.

根据 slevin 的说法，他们目前使用的地理服务器版本是不可能的。添加反向代理并在 webapp 的子文件夹下提供 geoserver 或在 geoserver 的子文件夹下提供 webapp 的可能解决方法。这样他们就有了相同的起源。坚持使用不同域的另一种选择，但使用反向代理将 CORS headers 添加到地理服务器响应中。

Answer 2

尝试启动 google-chrome 禁用安全并允许访问本地文件

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

这将禁用同源策略并允许本地文件相互访问。

你可能会收到稳定性和安全警告，你可以避免开发。

node.js 和地理服务器 CORS

node.js and geoserver CORS

node.js

express

openlayers

openlayers-3

geoserver