Как добавить CORS-заголовки на сервер статического соединения?

Question

Я пишу небольшой демонстрационный веб-сервер, предоставляющий статические HTML, CSS и Javascript. Сервер выглядит так

(function () {
    "use strict";

    var http = require("http");
    var connect = require('connect');
    var app = connect()
        .use(connect.logger('dev'))
        .use(connect.static('home'));

    var server = http.createServer(app);
    server.listen(9999, function () {
        console.log('server is listening');
    });
})();

Мой клиентский JavaScript делает ajax-вызовы на другой сервер. Как я могу добавить

Access-Control-Allow-Origin: http://example.com

на мой ответ сервера, так что на стороне клиента javascript может сделать вызов ajax?

Answer 1

Было немного проблем с выяснением этого, так как экспресс избаловал меня.

Посмотрите на включение Cors. В основном, что вам нужно сделать, это добавить Access-Control-Allow-Origin к домену, на котором вы хотите включить cors. response.setHeaders идеально подходит для этой задачи.

Еще одна вещь, которую стоит отметить, это то, что у connect нет способа обрабатывать маршруты. Если вашему приложению нужны разные маршруты, вам, вероятно, придется написать логику для каждого из них и добавить заголовки res к тем, на которых вы хотите включить cors. Ты можешь использовать req.url для этого.

var http = require("http");
var connect = require('connect');

var app = connect()

    .use(connect.logger('dev'))

    .use(connect.static('home'))

    .use(function(req, res){

    res.setHeader("Access-Control-Allow-Origin", "http://example.com");
    res.end('hello world\n');

 });

var server = http.createServer(app);

server.listen(9999, function () {

    console.log('server is listening');
});

Это ответ, который я получил в Chrome Dev Tools

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Date: Sat, 15 Jun 2013 16:01:59 GMT
Connection: keep-alive
Transfer-Encoding: chunked

Answer 2

Я надеюсь, это поможет:

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', config.allowedDomains);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

//...
app.configure(function() {

    app.use(allowCrossDomain);
    app.use(express.static(__dirname + '/public'));
});

Более подробно: как разрешить CORS?

Answer 3

express.static принимает объект конфигурации. Вы можете предоставить недвижимость setHeaders и из этой функции вы можете установить заголовки для ответа:

    app.use(express.static('public', {
      setHeaders: function setHeaders(res, path, stat) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Methods', 'GET');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
      }
    }))

Параметры этой функции:

• res, объект ответа.
• path путь к файлу, который отправляется.
• stat, объект статистики файла, который отправляется.

Я хотел бы, чтобы запрос был доступен здесь, чтобы я мог условно установить заголовки CORS на основе Origin заголовок.

Answer 4

Самый простой способ, если вы используете gulp, - это использовать плагин gulp под названием "gulp-connect" и "connect-modrewrite" и определить новую gulptask для перенаправления определенного API. Это делается для того, чтобы заставить Apache выступать в качестве прокси-сервера для конкретного API, обходить предполетный запрос, чтобы избежать проблем с COR. Я использовал следующую задачу, чтобы преодолеть эту проблему.

var connect = require('gulp-connect'),
    modRewrite = require('connect-modrewrite');
/**
* Proxy Config
*/
gulp.task('connect', function () {
  connect.server({
    root: ['./.tmp', './.tmp/{folderLocations}', './src', './bower_components'],
    port: 9000,
    livereload: true,
    middleware: function (connect, opt) {
      return [
        modRewrite([
          '^/loginProxy/(.*)$ http://app.xyzdomain.com/service/login/auth/$1 [P]'
        ])
      ];
    }
  });
});