node.js 和地理服务器 CORS
node.js and geoserver 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
中,我将我的 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.
我尝试了很多在网上找到的变体。我把代码放在 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
响应中设置 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 添加到地理服务器响应中。
尝试启动 google-chrome
禁用安全并允许访问本地文件
google-chrome --disable-web-security --allow-file-access-from-files
这将禁用同源策略并允许本地文件相互访问。
你可能会收到稳定性和安全警告,你可以避免开发。
我有 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: '© ' +'<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 中,我看不到图层,我得到了那个错误
忘记 '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 添加到地理服务器响应中。
尝试启动 google-chrome
禁用安全并允许访问本地文件
google-chrome --disable-web-security --allow-file-access-from-files
这将禁用同源策略并允许本地文件相互访问。
你可能会收到稳定性和安全警告,你可以避免开发。