node.js和geoserver CORS [英] node.js and geoserver CORS
问题描述
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 p>
var routes = require（'./ routes / index'）; //上面解释
var app = express（）;
//查看引擎设置
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&''''''''''
}）]，
params：{'LAYERS'：'mymap：planet_osm_polygon，mymap：planet_osm_line，mymap ：planet_osm_roads，mymap：planet_osm_point'}，
serverType：'geoserver'
}）
}
我收到错误
http：// localhost：8080'已经被跨原始资源共享策略阻止加载：不存在Access-Control-Allow-Origin头他要求资源。原来'http：// localhost：5550'因此不允许访问。
我尝试了很多我在网上找到的变体。我将代码放在 app.use之前（express.static（path.join（__ dirname，'public'）））; 。我把它放在 index.js 的 router.get 中。依然没有。
谢谢
备注
这个工作在Internet Explorer 11中。没有错误，我可以看到图层
在firefox 30中没有错误，但是看不到图层
在chrome 45中我看不到图层，我收到了错误
忘记'Access-Control-Allow-Origin'，'*'这是一个巨大的安全风险。设置请求域的名称，并维护域的白名单。
我认为很明显，您的中间件不会在 http：// localhost：8080 响应。检查网络面板上的标题，firebug等...并进行调试。 如何从HTTP调试http响应头调用
Firefox不会总是正确处理CORS错误，所以你也应该检查chrome。 Internet Explorer与其他浏览器的工作方式不同： https://stackoverflow.com/a/22450633/607033 ，因此它接受 http：// localhost：5550 同样的原因，这就是为什么你的错误代码在msie中工作的原因。尝试通过附加主机文件来使用自定义命名域，我相信您将收到来自msie的错误消息。
编辑 - 赶上评论
示例代码的主要问题是webapp（domain： http：// localhost：5550 ）返回您的CORS头。由于webapp想要从浏览器访问geoserver（ http：// localhost：8080 ），所以geoserver应该授予访问权限而不是webapp。因此，geoserver应该返回CORS头而不是webapp。
根据目前使用的geoserver版本是不可能的。添加反向代理的可能的解决方法，并在webapp的子文件夹下提供geoserver，或者在geoserver的子文件夹下提供webapp。这样他们都有相同的起源。另一个选项是坚持使用不同的域，但是使用反向代理将CORS头添加到geoserver响应中。
I have node.js server 0.10.12 and express.js 4.8.5. Node.js is the web server, includes openlayers 3.9.0.
Geoserver 2.1.3 serves the WMS layer. Later, I will implement vector layers.
There is only one route (for the index page)
var routes = require('./routes/index');
The index.js contains
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;
So the app.js has
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')));
I added the following for 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);
And in the index.ejs I set my Geoserver WMS layer like this
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: '© ' +'<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'
})
})
And I get the error
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.
I tried a lot of variations I found online. I put the code before the app.use(express.static(path.join(__dirname, 'public')));. I put it inside the router.get of the index.js. Still nothing. I fail to understand what is wrong.
Thanks
notes
This works in internet explorer 11. No errors and I can actually see the layer
No errors in firefox 30 but I cannot see the layer
In chrome 45 I cannot see the layer and I get that error
Forget 'Access-Control-Allow-Origin', '*' it is a huge security risk. Set the name of the requesting domain instead and maintain a whitelist of domains.
I think it is obvious that your middleware does not set the headers in the http://localhost:8080 response. Check the headers on the network panel, firebug, etc... and debug it. How to debug the http response headers from a HTTP call
Firefox does not handle CORS errors always properly, so you should check chrome as well. Internet explorer works differently from the others: https://stackoverflow.com/a/22450633/607033 so it accepts http://localhost:5550 as same origin, that's why your buggy code works in msie. Try to use custom named domains by appending the hosts file, and I am sure you will get error message from msie as well.
edit - to catch up with the comments
The main problem with the example code, that the webapp (domain: http://localhost:5550) returns your CORS headers. Since the webapp wants to access the geoserver (http://localhost:8080) from the browser, the geoserver should grant access and not the webapp. So the geoserver should return the CORS headers instead of the webapp.
According to slevin it is not possible with the version of geoserver they currently use. A possible workaround to add a reverse proxy and serve the geoserver under a subfolder of the webapp or serve the webapp under a subfolder of the geoserver. This way they both would have the same origin. Another option to stick with different domains, but add the CORS headers to the geoserver response using the reverse proxy.
这篇关于node.js和geoserver CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
