Gulp Browsersync and http-proxy-middleware in offline mode

问题

Does Browsersync with http-proxy-middleware work offline if I am proxying to a localhost server?

I have an angular app deployed at localhost:3000 making requests for an api-server deployed at localhost:8080. The http requests to the api-server are proxied by Browsersync http-proxy-middleware. Everything works fine if I have internet connection but, if I go offline, I get the following error on gulp console:

[HPM] Proxy error: ENOENT localhost:8080/data/pet

And on browser console:

Failed to load resource: the server responded with a status of `500 (Internal Server Error)`

I know the error is not on the server because I can still reach localhost:8080/data/pet with the browser.

Since the api-server is deployed locally, it seems odd that I need an internet connection to proxy the http requests.

The angular application, with all its configuration, was generated with the generator-gulp-angular

This is my gulp server configuration:

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

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

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if (baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }

  var server = {
    baseDir: baseDir,
    routes: routes
  };


  server.middleware = proxyMiddleware('/data',
    {
      target: 'http://localhost:8080'
    });

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser,
    online: false
  });
}

browserSync.use(browserSyncSpa({
  selector: '[ng-app]'// Only needed for angular apps
}));

gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

gulp.task('serve:dist', ['build'], function () {
  browserSyncInit(conf.paths.dist);
});

gulp.task('serve:e2e', ['inject'], function () {
  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});

gulp.task('serve:e2e-dist', ['build'], function () {
  browserSyncInit(conf.paths.dist, []);
});

And this is my package.json:

{
  "name": "petStore",
  "version": "0.0.0",
  "dependencies": {},
  "scripts": {
    "test": "gulp test"
  },
  "devDependencies": {
    "gulp": "~3.9.0",
    "gulp-autoprefixer": "~2.3.1",
    "gulp-angular-templatecache": "~1.6.0",
    "del": "~1.2.0",
    "lodash": "~3.9.3",
    "gulp-csso": "~1.0.0",
    "gulp-filter": "~2.0.2",
    "gulp-flatten": "~0.0.4",
    "gulp-jshint": "~1.11.0",
    "gulp-load-plugins": "~0.10.0",
    "gulp-size": "~1.2.1",
    "gulp-uglify": "~1.2.0",
    "gulp-useref": "~1.2.0",
    "gulp-util": "~3.0.5",
    "gulp-ng-annotate": "~1.0.0",
    "gulp-replace": "~0.5.3",
    "gulp-rename": "~1.2.2",
    "gulp-rev": "~5.0.0",
    "gulp-rev-replace": "~0.4.2",
    "gulp-minify-html": "~1.0.3",
    "gulp-inject": "~1.3.1",
    "gulp-protractor": "~1.0.0",
    "gulp-sourcemaps": "~1.5.2",
    "gulp-less": "~3.0.3",
    "gulp-angular-filesort": "~1.1.1",
    "main-bower-files": "~2.8.0",
    "merge-stream": "~0.1.7",
    "jshint-stylish": "~2.0.0",
    "wiredep": "~2.2.2",
    "karma": "~0.12.36",
    "karma-jasmine": "~0.3.5",
    "karma-phantomjs-launcher": "~0.2.0",
    "karma-angular-filesort": "~0.1.0",
    "karma-ng-html2js-preprocessor": "~0.1.2",
    "concat-stream": "~1.5.0",
    "require-dir": "~0.3.0",
    "browser-sync": "~2.7.12",
    "browser-sync-spa": "~1.0.2",
    "http-proxy-middleware": "~0.2.0",
    "chalk": "~1.0.0",
    "uglify-save-license": "~0.4.1",
    "wrench": "~1.5.8"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

And this is the http call:

  $http.get("/data/pet").then(function (result) {
        vm.petName = result.data.name;
      });

And bower.json

{
  "name": "petStore",
  "version": "0.0.0",
  "dependencies": {
    "angular-resource": "~1.4.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "~3.3.4",
    "angular-bootstrap": "~0.13.0",
    "malarkey": "yuanqing/malarkey#~1.3.0",
    "toastr": "~2.1.1",
    "moment": "~2.10.3",
    "animate.css": "~3.3.0",
    "angular": "~1.4.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.4.0"
  },
  "resolutions": {
    "angular": "~1.4.0"
  }
}

回答1:

Just did some tests and I can confirm this issue. Ran the library tests with: "npm test". It will setup actual servers to run some of the tests.

When online, all tests succeed. But when running the tests offline, it will produce the same error message.

The actual proxy functionality is provided by node-http-proxy.

This issue has been reported at: https://github.com/nodejitsu/node-http-proxy/issues/835

I'm also curious why http-proxy can't be used offline.

(disclaimer: I'm the author of http-proxy-middleware.)

回答2:

Looks like core browsersync doesn't require an internet connection. Some features do.

The following setting lets you switch browsersync to offline mode: https://browsersync.io/docs/options/#option-online

I set this property in the server.js file and my app works off line:

browserSync.instance = browserSync.init({ startPath: '/', server: server, browser: browser, online: false });

来源：https://stackoverflow.com/questions/31405955/gulp-browsersync-and-http-proxy-middleware-in-offline-mode

标签

javascript

angularjs

gulp

browser-sync

node-http-proxy