node.js和geoserver CORS
我有node.js服务器0.10.12和express.js 4.8.5。 Node.js是Web服务器,包含openlayers 3.9.0。
Geoserver 2.1.3服务于WMS层。 之后,我将实现vector图层。
只有一个路线(索引页面)
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: '© ' +'<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.
我尝试了很多我在网上find的变化。 我把代码放在app.use(express.static(path.join(__dirname, 'public')));
。 我把它放在index.js
的router.get
中。 依然没有。 我不明白什么是错的。
谢谢
笔记
这在Internet Explorer 11中工作。没有错误,我实际上可以看到图层
在Firefox 30没有错误,但我不能看到图层
在铬45我看不到图层,我得到的错误
忘记'Access-Control-Allow-Origin', '*'
这是一个巨大的安全风险。 请设置请求域的名称,并维护域的白名单。
我认为很明显,你的中间件不会在http://localhost:8080
响应中设置标题。 检查networking面板上的标题,萤火虫等…并进行debugging。 如何从HTTP调用中debugginghttp响应头
Firefox不能正确处理CORS错误,所以你也应该检查chrome。 互联网浏览器与其他网站的工作方式不同: https http://localhost:5550
//stackoverflow.com/a/22450633/607033所以它接受http://localhost:5550
作为相同的来源,这就是为什么你的错误代码工作在msie。 尝试通过附加hosts文件来使用自定义的命名域,我相信你也会从msie得到错误信息。
编辑 – 以赶上评论
示例代码的主要问题是,webapp(域: http://localhost:5550
)返回您的CORS头。 由于webapp想要从浏览器访问geoserver( http://localhost:8080
),geoserver应该授予访问权限,而不是webapp。 所以geoserver应该返回CORS头,而不是webapp。
根据slevin,他们目前使用的geoserver版本是不可能的。 可能的解决方法是添加反向代理服务器,并在webapp的子文件夹下提供地理服务器,或者在地理服务器的子文件夹下提供Web应用程序。 这样他们都有相同的起源。 另一个select是使用不同的域,但是使用反向代理将CORS头添加到geoserver响应中。
尝试启用google-chrome
禁用安全性,并允许访问本地文件
google-chrome --disable-web-security --allow-file-access-from-files
这将禁用相同的来源策略,并允许本地文件访问对方。
您可能会收到稳定性和安全警告,您可以避免发展。