28

我正在尝试使用 gulp 和浏览器同步重定向我的 API 请求：

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

});

但是当调用被发送到 API 时，我得到了这个响应：

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

知道我做错了什么吗？

4

3 回答 3

50

查看有关将 BrowserSync 与 Gulp 一起使用的官方文档。我能够启动 BrowserSync 并使用代理运行/api，没有任何问题。

检查以确保没有其他东西正在使用 port 8000。您可以port在初始化 BrowserSync 时通过选项更改 BrowserSync 使用的端口。

这是gulpfile.js我最终得到的：

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

如果您不想创建单独的 gulp 任务来重新加载/流式传输更改，则可以使用以下files选项：

browserSync({
    open: true,
    port: 3000,
    server: {
        baseDir: "./",
        middleware: [proxy(proxyOptions)]
    },
    files: paths.css
});
于 2014-09-23T03:37:21.153 回答
12

在从 grunt 迁移到 gulp 时，我在 gulp + browser-sync + proxy-middleware 设置中遇到了同样的问题。

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

在我的情况下，公司网络中的某些东西不允许代理中间件工作。一旦我在公共网络上，问题就消失了。

使用 grunt-connect + grunt-connect-proxy，我可以毫无问题地代理公司网络内的文件。

proxy-middleware 实现了自己的代理功能，而 grunt-connect-proxy 使用 http-proxy 来完成实际的代理工作。

我最终围绕 http-proxy 编写了一个小型中间件包装器，用于浏览器同步和连接，它解决了公司网络中的代理问题。

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]
    }
});
于 2015-03-14T22:28:46.277 回答
1

我遇到了一个问题，我找不到解决方案。我需要两个选项：

  1. browser-syncSPA模式下运行
  2. 路由中有中间件代理/api

SPA 模式似乎拦截/api并呈现index.html而不是代理到后端。

解决方案在browser-sync 源代码中：使用该路由实现单一模式middleware，其优先级高于手动添加的路由：

        if (bs.options.get("single")) {
            defaultMiddlewares.unshift({
                id: "Browsersync SPA support",
                route: "",
                handle: require("connect-history-api-fallback")()
            });
        }

根据需要进行以下配置 -SPA路由位于中间件列表的末尾：

const proxy = require('proxy-middleware');
...
    server.init({
        ...
        middleware: [ {
            route: "/api",
            handle: proxy(url.parse("http://api.host:4444/api"))
        }, {
            id: "SPA support",
            route: "",
            handle: require("connect-history-api-fallback")()
        } ],
        single: false,
        ...
    })
于 2020-12-24T18:52:19.800 回答