web-dev-qa-db-fra.com

Comment puis-je ajouter des en-têtes CORS à un serveur de connexion statique?

J'écris un petit serveur Web de démonstration fournissant du HTML statique, du CSS et du Javascript. Le serveur ressemble

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

Mon client côté javascript fait des appels ajax vers un autre serveur. Comment ajouter

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

à la réponse de mon serveur, afin que le javascript côté client puisse faire l'appel ajax?

24
afx

J'ai eu un peu de mal à comprendre celui-ci depuis express m'a gâté.

Jetez un oeil à activer les cors . Fondamentalement, ce que vous devez faire, c'est ajouter Access-Control-Allow-Origin au domaine sur lequel vous souhaitez activer les cors. response.setHeaders est parfait pour cette tâche.

Une autre chose à noter est que connect n'a aucun moyen de gérer les itinéraires. Si votre application doit avoir des itinéraires différents, vous devrez probablement écrire une logique pour chacun d'eux et ajouter des en-têtes res à ceux sur lesquels vous souhaitez activer les cors. Vous pouvez utiliser req.url pour ça.

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

Voici la réponse que j'ai reçue dans 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
18

J'espère que cela vous aidera:

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

Plus de détails: Comment autoriser CORS?

6
qwe123wsx

express.static prend un objet de configuration. Vous pouvez fournir la propriété setHeaders et à partir de cette fonction, vous pouvez définir des en-têtes pour la réponse:

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

Les paramètres de cette fonction sont:

  • res, l'objet de réponse.
  • path, le chemin du fichier envoyé.
  • stat, l'objet stat du fichier envoyé.

Je souhaite que la demande soit disponible ici afin que je puisse conditionnellement définir les en-têtes CORS sur la base de l'en-tête Origin.

3
Carl G

La méthode la plus simple, si vous utilisez gulp, serait d'utiliser le plugin gulp appelé "gulp-connect" et "connect-modrewrite" et de définir un nouveau gulptask pour rediriger une api particulière. Il s'agit de faire en sorte qu'Apache agisse en tant que proxy pour l'api en question, pour contourner la demande de pré-vol, afin d'éviter le problème des COR. J'ai utilisé la tâche de gulp suivante pour surmonter ce problème.

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]'
        ])
      ];
    }
  });
});
2
vmathew