1. ホーム
  2. node.js

[解決済み] node.js上のexpress.jsフレームワークでCORS(cross-origin resource sharing)を有効にする方法

2022-12-14 01:58:48

質問

私はnode.jsでウェブサーバーを構築しようとしていますが、クロスドメインスクリプティングをサポートし、なおかつパブリックディレクトリから静的ファイルを提供します。私は express.js を使用していますが、クロスドメインスクリプトを許可する方法がよくわかりません ( Access-Control-Allow-Origin: * ).

私が見たのは この投稿 を見ましたが、これは参考になりませんでした。

var express = require('express')
  , app = express.createServer();

app.get('/', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

app.configure(function () {
    app.use(express.methodOverride());
    app.use(express.bodyParser());
    app.use(app.router);
});

app.configure('development', function () {

    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function () {


    var oneYear = 31557600000;
    //    app.use(express.static(__dirname + '/public', { maxAge: oneYear }));
    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler());
});

app.listen(8888);
console.log('express running at http://localhost:%d', 8888);

どのように解決するのですか?

チェックアウト enable-cors.orgの例をご覧ください。 :

node.js上のExpressJSアプリで、ルートを使って次のようにします。

app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
 });

app.get('/', function(req, res, next) {
  // Handle the get for this route
});

app.post('/', function(req, res, next) {
 // Handle the post for this route
});

最初の呼び出し( app.all ) は、アプリ内の他のすべてのルート (または少なくとも CORS を有効にしたいルート) の前に作成する必要があります。

[編集]

静的ファイルにもヘッダを表示させたい場合は、次のようにしてください。 use(express.static()) :

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

あなたのコードでテストしてみたところ、アセット上のヘッダを public ディレクトリにあるアセットにヘッダを取得しました。

var express = require('express')
  , app = express.createServer();

app.configure(function () {
    app.use(express.methodOverride());
    app.use(express.bodyParser());
    app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      next();
    });
    app.use(app.router);
});

app.configure('development', function () {
    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function () {
    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler());
});

app.listen(8888);
console.log('express running at http://localhost:%d', 8888);

もちろん、この関数をモジュールにパッケージ化することで、次のようなことができるようになります。

// cors.js

module.exports = function() {
  return function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
  };
}

// server.js

cors = require('./cors');
app.use(cors());