如何在node.js上的express.js框架中启用跨源资源共享(CORS)

Question

我正在尝试在node.js中构建一个支持跨域脚本的Web服务器,同时仍然提供来自公共目录的静态文件.我正在使用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);

Answer 1

查看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
});

第一个call(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());

Answer 2

在@Michelle Tilley解决方案之后,显然它起初并不适合我.不知道为什么,也许我正在使用chrome和不同版本的节点.在做了一些小调整后,它现在对我有用.

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

如果有人遇到与我类似的问题,这可能会有所帮助.

Answer 3

尝试这个cors npm模块.

var cors = require('cors')

var app = express()
app.use(cors())

该模块提供了许多功能来微调cors设置,例如域名白名单,为特定api启用cors等.