it-swarm.com.de

Gulp browser-sync - API-Anfrage über Proxy umleiten

Ich versuche, meine API-Anfragen wie folgt mit gulp und browser-sync umzuleiten:

gulp.task('browser-sync', function () {

   var files = [
      '../index.html',
      '../views/**/*.html',
      '../assets/css/**/*.css',
      '../assets/js/**/*.js'
   ];

   var url = require('url'),
   proxy = require('proxy-middleware');
   var proxyOptions = url.parse('http://localhost:8000/api');
   proxyOptions.route = '/api';

   browserSync.init(files, {
      server: {
         baseDir: '..',
         middleware: [proxy(proxyOptions)]
      }
   });

});

Aber ich bekomme diese Antwort, wenn ein Aufruf an die API gesendet wird:

Error: connect ECONNREFUSED
    at errnoException (net.js:904:11)
    at Object.afterConnect [as oncomplete] (net.js:895:19)

Irgendeine Idee, was ich falsch mache?

27
alskaa

Lesen Sie die offizielle Dokumentation zur Verwendung von BrowserSync mit Gulp . Ich konnte BrowserSync ohne Probleme mit einem Proxy auf /api Zum Laufen bringen.

Stellen Sie sicher, dass kein anderer Port 8000 Verwendet. Sie können den von BrowserSync verwendeten Port mit der Option port beim Initialisieren von BrowserSync ändern.

Hier ist der gulpfile.js, Mit dem ich gelandet bin:

npm install gulp url proxy-middleware browser-sync --save-dev

// Include gulp
var gulp = require('gulp');

var url = require('url');
var proxy = require('proxy-middleware');
var browserSync = require('browser-sync'); 

var paths =  {
    css: ['./**/*.css', '!./node_modules/**/*']
};


// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
    var proxyOptions = url.parse('http://localhost:3000/secret-api');
    proxyOptions.route = '/api';
    // requests to `/api/x/y/z` are proxied to `http://localhost:3000/secret-api/x/y/z`

    browserSync({
        open: true,
        port: 3000,
        server: {
            baseDir: "./",
            middleware: [proxy(proxyOptions)]
        }
    });
});

// Stream the style changes to the page
gulp.task('reload-css', function() {
    gulp.src(paths.css)
        .pipe(browserSync.reload({stream: true}));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch(paths.css, ['reload-css']);
});

// Default Task
gulp.task('default', ['browser-sync', 'watch']);

Wenn Sie keine separate Schluckaufgabe durchführen möchten, um die Änderungen neu zu laden/zu streamen, können Sie die Option files verwenden:

browserSync({
    open: true,
    port: 3000,
    server: {
        baseDir: "./",
        middleware: [proxy(proxyOptions)]
    },
    files: paths.css
});
48
MLM

Ich bin auf dasselbe Problem mit dem Setup von gulp + browser-sync + proxy-middleware gestoßen, als ich von grunt auf gulp migriert bin.

Error: connect ECONNREFUSED
    at errnoException (net.js:904:11)
    at Object.afterConnect [as oncomplete] (net.js:895:19)

In meinem Fall etwas innerhalb des Unternehmensnetzwerks, das Proxy-Middleware nicht zuließ. Sobald ich im öffentlichen Netzwerk war, war das Problem behoben.

Mit grunt-connect + grunt-connect-proxy konnte ich problemlos Dateien innerhalb des Firmennetzwerks proxen.

die Proxy-Middleware implementiert ihre eigene Proxy-Funktionalität, während der Grunt-Connect-Proxy den HTTP-Proxy verwendet, um die eigentliche Proxy-Arbeit zu erledigen.

Am Ende habe ich einen kleinen Middleware-Wrapper um http-proxy geschrieben, der für die Browser-Synchronisierung und -Verbindung verwendet werden soll. Dadurch wurden die Proxy-Probleme im Unternehmensnetzwerk behoben.

https://www.npmjs.com/package/http-proxy-middleware

var browserSync = require('browser-sync');
var proxyMiddleware = require('http-proxy-middleware');

var proxy = proxyMiddleware('/ajax', {target: 'http://cdnjs.cloudflare.com'});

browserSync({
    server: {
        baseDir: "./",
        port: 3000,
        middleware: [proxy]
    }
});
12
chimurai