关闭离线模式下的Browsersync和http-proxy-middleware
Gulp Browsersync and http-proxy-middleware in offline mode
是否Browsersync与http-proxy-middleware工作脱机,如果我代理到本地主机服务器?
我有一个部署在localhost:3000
的angular应用程序,它向部署在localhost:8080
的api服务器发出请求。对api-server的http请求由Browsersync http-proxy-middleware
代理。如果我有互联网连接,一切都可以正常工作,但是,如果我脱机,我在gulp控制台得到以下错误:
[HPM] Proxy error: ENOENT localhost:8080/data/pet
在浏览器控制台上:
Failed to load resource: the server responded with a status of `500 (Internal Server Error)`
我知道错误不在服务器上,因为我仍然可以用浏览器访问localhost:8080/data/pet
。
由于api-server是本地部署的,所以我需要一个internet连接来代理http请求似乎很奇怪。
angular应用及其所有配置都是用generator-gulp-angular
生成的这是我的gulp服务器配置:'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, []);
});
这是我的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"
}
}
这是http调用:
$http.get("/data/pet").then(function (result) {
vm.petName = result.data.name;
});
和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"
}
}
刚刚做了一些测试,我可以确认这个问题。使用:"npm test"运行库测试。它将设置实际的服务器来运行一些测试。
在线时,所有测试都成功。但是当脱机运行测试时,它将产生相同的错误消息。
实际的代理功能由node-http-proxy提供。
这个问题已经报告在:https://github.com/nodejitsu/node-http-proxy/issues/835
我也很好奇为什么http-proxy不能离线使用。
(免责声明:我是http-proxy-middleware的作者)
看起来core browsersync不需要互联网连接。
以下设置允许您将browsersync切换到脱机模式:https://browsersync.io/docs/options/#option-online
我在server.js文件中设置了这个属性,我的应用程序离线工作:
browserSync.instance = browserSync.init({
startPath: '/',
server: server,
browser: browser,
online: false
});
- Bootstrap JS无法使用BrowserSync
- browserSync + Gulp,得到错误 => TypeError: _.contains 不是一个函数
- BrowserSync 阻止在 Firefox (OS X) 中导航
- Gulp-JADE-browserSync不会自动重新加载
- 错误:[$injector:unp]未知提供程序:RequestsServiceProvider<-请求服务htt
- 如何使用http代理中间件重定向/代理来自browsersync的相对url
- BrowserSync显示第二次刷新后的更改
- Browsersync仅在浏览器为活动窗口时刷新
- BrowserSync突然无法连接到浏览器
- 将wer添加到Gulp/Nodemon/Browsersync/Angular配置中
- Gulp BrowserSync does not refresh
- browserSync.重载不执行使用Gulp任务
- CSS注入不能与Gulp + Browsersync一起工作
- Gulp文件集成与browsersync
- SASS + CSS Injecting with Gulp and BrowserSync
- 在Browsersync中手动重写请求到特定的url
- Gulp watch with browserSync
- 使用Gulp启动BrowserSync服务器非常慢
- 关闭离线模式下的Browsersync和http-proxy-middleware
- 为什么Browsersync会为一个编译任务实时重新加载,而不是为另一个编译任务重新加载?