2015-09-28 16 views
13

私はnode.jsサーバー0.10.12とexpress.js 4.8.5を持っています。 Node.jsはWebサーバーで、openlayers 3.9.0を含んでいます。node.jsとgeoserver CORS

Geoserver 2.1.3はWMSレイヤーを提供します。後で、私はベクトルレイヤーを実装します。

あり(インデックス・ページ用)1つのルートのみ

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は私がCORSのために次のことを追加

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'))); 

を持って

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に私はこの

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' 
}) 

})

のように私のGeoserver WMSレイヤを設定し、私はバリエーションの多くを試してみました

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の中に入れました。まだ何も。何が間違っているのか分からない。

おかげ

ノート

これは、Internet Explorerの11エラーなしで動作し、私は実際のFirefox 30で層に

んがエラーを見ることはできませんが、私は層

を参照することはできません

クロム45ではレイヤーが見えず、そのエラーが発生します

+1

- https://stackoverflow.com/a/25025579/4640499ご覧ましたか? –

+1

@slevin間違った側にCORSを追加しています。ノードアプリケーションからGeoserverに接続しています。 CORSはGeoserverに追加する必要があります。ノードアプリケーションには追加しないでください。 – hassansin

+0

@JonatasWalkerはい、ありがとう、私はGeoserverをこの – slevin

答えて

7

忘れました'Access-Control-Allow-Origin', '*'これは巨大なセキュリティリスクです。代わりに要求元のドメインの名前を設定し、ドメインのホワイトリストを維持します。

あなたのミドルウェアがhttp://localhost:8080応答でヘッダーを設定していないことは明らかです。ネットワークパネル上のヘッダー、火かき棒などをチェックし、それをデバッグしてください。 How to debug the http response headers from a HTTP call

FirefoxはCORSエラーを常に正しく処理しないため、chromeもチェックする必要があります。 Internet Explorerは他のブラウザとは違って動作します:https://stackoverflow.com/a/22450633/607033したがって、http://localhost:5550を同じ起点として受け付けます。そのため、あなたのバグのコードはmsieで動作します。 hostsファイルを追加してカスタムの名前付きドメインを使用しようとすると、msieからもエラーメッセージが出るはずです。

編集 - コメント

でWebアプリケーション(ドメイン:http://localhost:5550が)というサンプルコードの主な問題、追いつくためにあなたのCORSヘッダを返します。webappはブラウザからgeoserver(http://localhost:8080)にアクセスしたいので、geoserverはWebappではなくアクセスを許可する必要があります。したがって、geoserverはwebappの代わりにCORSヘッダーを返す必要があります。

slevinによると、現在使用しているジオサーバのバージョンでは不可能です。リバースプロキシを追加し、webappのサブフォルダの下にgeoserverを提供するか、geoserverのサブフォルダの下にwebappを提供する可能性のある回避策。このようにして、彼らは両方とも同じ起源を持つでしょう。別のドメインを使用することもできますが、リバースプロキシを使用してCORSヘッダーをジオサーバー応答に追加することもできます。

+0

Chromeコンソールは 'localhost:8080'のマップに対して' 200'ステータスを与えますが、サイズはありません。そしてCORSエラー。 Firebugはまた '200'ステータスを返します。サイズはありますが、エラーはありません。 「あなたのミドルウェアは、http:// localhost:8080のレスポンスでヘッダーを設定していないことは明らかです。ネットワークパネル、Firebugなどのヘッダーをチェックし、デバッグしてください。 "あなたが答えを更新して私に説明したいのであれば、それはすばらしいことです。率直に言って私は積み重ねているからです。 – slevin

+0

私はまた、 'http:// jonathanmh.com/how-to-enable-cs-express-js-node-js /'と 'http://www.tamas.io/node-jsexpress-cors-実装/ '、実装しようとしましたが、運はありません。 Thankns – slevin

+0

@slevinエラーメッセージに従って、アクセスコントロールヘッダーが応答に表示されず、問題が発生します。 Firebugでfirefoxのレスポンスヘッダーをチェックする方法についてのリンクを追加しましたが、開発ツールを使用して現在のブラウザでこれを行うことができます。 – inf3rno

-2

これは、同一生成元ポリシーを無効にし、ローカルのファイルが相互にアクセスできるようになります無効にセキュリティをgoogle-chromeを開始し、ローカルファイルへのアクセス

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

が可能に試してみてください。

安定性とセキュリティに関する警告が表示される場合があります。開発を避けることができます。