Grunt connect Task und Middleware Access-Control-Allow-Origin

Question

Ich möchte den Zugriff ermöglichen, um Ursprungsaufrufe zu kreuzen, die ich in der Lage sein muss, Rest-API-Aufrufe an den Server auszuführen.

Mein Grunzen Aufgabe verbinden ist wie folgt konfiguriert:

connect: { 
    options: { 
    port: 9000, 
    // Change this to '0.0.0.0' to access the server from outside. 
    hostname: 'localhost', 
    livereload: 35729, 
    middleware: function(connect, options, next) { 
     return [ 
     function(req, res, next) { 
      res.setHeader('Access-Control-Allow-Origin', '*'); 
      res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); 
      next(); 
     } 
     ]; 
    } 
    }, 
}, 

Wenn ich das Grunzen Server betreibe ich Cannot GET / bin immer. Ohne die Middleware-Konfiguration funktioniert die App und die Indexdatei wird korrekt geladen.

Können Sie mich zu dem führen, was ich falsch mache oder verpasse?

Einige weitere Details über meine Gruntfile ist, dass ich die yeoman angular seed App als meine Basis für die App verwende.

Answer 1

versuchen, etwas wie folgt aus:

connect: { 
    options: { 
    port: 9000, 
    // Change this to '0.0.0.0' to access the server from outside. 
    hostname: 'localhost', 
    livereload: 35729, 

    // remove next from params 
    middleware: function(connect, options) { 
     return [ 
     function(req, res, next) { 
      res.setHeader('Access-Control-Allow-Origin', '*'); 
      res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); 

      // don't just call next() return it 
      return next(); 
     }, 

     // add other middlewares here 
     connect.static(require('path').resolve('.')) 

     ]; 
    } 
    }, 
    }, 

Answer 2

connect: { 
    options: { 
    port: 9000, 
    // Change this to '0.0.0.0' to access the server from outside. 
    hostname: 'localhost', 
    livereload: 35729, 
    middleware: function(connect, options, next) { 
     return [ 
     function(req, res, next) { 
     res.header('Access-Control-Allow-Credentials', true); 
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
     res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
     next(); 
     }]; 
    } 
    }; 

dieser Wille hilft Ihnen bei der immer die erhalten rufen Access-Control-Allow-Credentials

Answer 3

Nod bpaul, die mich auf dem Weg auf korrekte Antwort. Das Format einer Antwort auf eine similar question wird hier funktionieren.

Ersetzen ‚next‘ mit Middleware, und drücken Sie Ihre anonyme Funktion in den Middleware-Array vor der Rückgabe:

middleware: function(connect, options, middlewares) { 

    middlewares.unshift(function(req, res, next) { 
     res.setHeader('Access-Control-Allow-Credentials', true); 
     res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
     res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
     next(); 
    }); 

    return middlewares; 
} 

Answer 4

Grunt kommt mit mehreren Middle verbindet als Funktionen in einem Array abgelegt. Wenn Sie Middleware setzen, indem Sie ein Array zurückgeben, überschreiben Sie die vorhandene Middleware, die für die Bereitstellung Ihrer Seiten zuständig ist.

Absorensen Kommentar der Dokumentation, https://github.com/gruntjs/grunt-contrib-connect#middleware der relevante Abschnitt sein.

Middleware früher im Array wird vor diesen später im Array wirksam.

Also, was würden Sie wollen, ist

connect: { 
    options: { 
     port: 9000, 
     // Change this to '0.0.0.0' to access the server from outside. 
     hostname: 'localhost', 
     livereload: 35729, 

     // remove next from params 
     middleware: function(connect, options, middlewares) { 
      middlewares.unshift(function(req, res, next) { 
       res.setHeader('Access-Control-Allow-Origin', '*'); 
       res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
       res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); 

       return next(); 
      }); 

      return middlewares; 
     } 
    }, 
},