web-dev-qa-db-fra.com

Gulp browser-sync - redirige la demande d'API via un proxy

J'essaie de rediriger mes demandes d'API comme ça avec gulp et browser-sync:

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

});

Mais j'obtiens cette réponse lorsqu'un appel est envoyé à l'API:

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

Une idée de ce que je fais mal?

apiproxygulpmiddlewarebrowser-sync
27
alskaa

Consultez la documentation officielle sur l'utilisation de BrowserSync avec Gulp . J'ai pu obtenir BrowserSync opérationnel avec un proxy sur /api sans problème.

Vérifiez que rien d'autre n'utilise le port 8000. Vous pouvez modifier le port utilisé par BrowserSync via l'option port lors de l'initialisation de BrowserSync .

Voici la gulpfile.js Je me suis retrouvé avec:

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

Si vous ne souhaitez pas créer une tâche gulp distincte pour recharger/diffuser les modifications, vous pouvez utiliser l'option files :

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

J'ai rencontré le même problème avec la configuration gulp + browser-sync + proxy-middleware, lors de la migration de grunt à gulp.

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

Dans mon cas, quelque chose au sein du réseau d'entreprise qui ne permettait pas au proxy-middleware de fonctionner. Dès que j'étais sur le réseau public, le problème avait disparu.

Avec grunt-connect + grunt-connect-proxy, je pouvais proxy des fichiers au sein du réseau d'entreprise sans aucun problème.

proxy-middleware implémente sa propre fonctionnalité de proxy, tandis que grunt-connect-proxy utilise http-proxy pour effectuer le travail de proxy réel.

J'ai fini par écrire un petit wrapper de middleware autour du proxy http pour être utilisé dans la synchronisation du navigateur et la connexion, ce qui a résolu les problèmes de proxy dans le réseau d'entreprise.

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