Gulp浏览器同步-通过代理重定向API请求

我正试图通过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)

你知道我做错了什么吗？

检查一下。我能够在

/api

上使用代理启动并运行BrowserSync，没有任何问题

检查以确保没有其他端口正在使用端口

8000

。您可以通过更改BrowserSync使用的端口

下面是我最后得到的

gulpfile.js

npm安装gulp url代理中间件浏览器同步——保存开发

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

如果不想执行单独的“吞咽”任务来重新加载/流式传输更改，可以使用：

在从grunt迁移到gulp时，我在gulp+浏览器同步+代理中间件设置中遇到了同样的问题

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

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

使用grunt connect+grunt connect proxy，我可以在公司网络中代理文件，而不会出现任何问题

代理中间件实现自己的代理功能，而grunt connect代理使用http代理来执行实际的代理工作

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


我遇到了一个我找不到解决办法的问题。我需要两种选择：

浏览器同步
正在运行
/api
路由上有代理
SPA模式似乎截取
/api
，并呈现
index.html
，而不是代理到后端

解决方案处于
浏览器同步
：使用
中间件
路由实现单一模式，该路由的优先级高于手动添加的路由：

        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,
        ...
    })


@pjv给我一个url的例子。这对我来说很好：
http://localhost:3000/secret-api/a/b/c/index.html？asfd
browsersync正在为需要发布到flask web应用程序的静态站点提供服务。flask应用程序也在我的开发机器上运行，运行端口与browsersync不同。browsersync在端口3000上运行，flask在端口4000上运行。因此，我想路由一个类似于
/charge
（完整url:
http://localhost:3000/charge
）至
http://localhost:4000/charge
@pjv完成这项工作：
var proxyOptions=url.parse（'http://localhost:4000/charge'); proxyOptions.route='/charge'。如果你需要进一步的帮助，我建议我们用这个来聊天。不，这不起作用-这正是我在gulpfile.js中的内容。当我提交表单时，flask应用程序中没有任何内容。如果我将路由更改为
/charge/
（尾随斜杠），则它会命中flask应用程序，但flask应用程序正在查找
/charge
而不是
/charge/
，因此它是404。我只是在尾随斜杠上面临同样的问题。如果url中没有它，则代理不起作用。这仅适用于基本url。嵌套URL即使没有斜杠也可以正常工作。您是否以某种方式解决了这个问题？中间件真是太棒了，太棒了@Tropicalista如果您认为发现了一个bug，请在以下位置创建一个记录：如何检查它是否正常工作？我配置了代理，但在网络/请求URL头中我没有看到代理URL。仅指向我的主机的URL，谢谢）
        if (bs.options.get("single")) {
            defaultMiddlewares.unshift({
                id: "Browsersync SPA support",
                route: "",
                handle: require("connect-history-api-fallback")()
            });
        }

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,
        ...
    })