浏览器同步代理不起作用答案

【问题标题】：Browser Sync proxy not working浏览器同步代理不起作用
【发布时间】：2017-06-04 01:16:29
【问题描述】：

我正在使用 Gulp 与 Browser Sync 和 XAMPP 来处理我正在构建的 Wordpress 网站。

这是我的 Gulp 设置：

var gulp = require('gulp');
var sass = require('gulp-sass');
var gulpif = require('gulp-if');
var useref = require('gulp-useref');
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
var cssnano = require('gulp-cssnano');

gulp.task('sass', function() {
    return gulp.src('assets/css/dev/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./'))
    .pipe(browserSync.reload({
        stream: true
    }))
});

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            proxy: 'http://localhost/turner/',
        },
        port: 80,
        logLevel: 'debug',
    })
});

gulp.task('watch', ['browserSync', 'sass'], function() {
    gulp.watch('assets/css/dev/**/*.scss', ['sass']);
});

我遇到的问题是我的 localhost 在端口 80 上工作，而浏览器同步尝试打开 81 端口。 See screenshot attached.

我禁用了 Skype 使用 80 端口，检查了 Windows 进程并且只有 Apache 正在使用这个端口。

无论我做什么，浏览器同步总是尝试打开 localhost:81 而不是 80，所以我无法使用它。请注意，gulp、browser-sync 和所有其他东西都是最新的，安装了最新版本。

谢谢！

【问题讨论】：

标签： wordpress apache gulp browser-sync gulp-browser-sync

【解决方案1】：

浏览器同步无法与网络服务器在同一端口上工作。浏览器同步会自动增加端口号，因为该端口已被您的 Web 服务器占用。根本不要使用端口选项。由于您在端口 80 上运行网络服务器，因此无需在代理中指定它。因此这应该有效：

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            proxy: 'http://localhost',
        },
       logLevel: 'debug',
    })
});

【讨论】：