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

问题描述

我想我这样的API请求重定向与一饮而尽和浏览器同步：

I'm trying to redirect my API requests like this with gulp and browser-sync:

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这样的响应：

But I get this response when a call is sent to the API:

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

这是我在做什么你知道错了吗？

Any idea on what I'm doing wrong?

推荐答案

结帐的。

Check to make sure nothing else is using port 8000. You can change what port BrowserSync uses via the port option when initializing BrowserSync.

下面是 gulpfile.js 我结束了：

NPM安装一饮而尽网址代理中间件的浏览器同步--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`

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

如果你不想做一个单独的任务一饮而尽重新加载/流的变化，您可以使用：

If you do not want to make a separate gulp task to reload/stream the changes, you can use the files option:

browserSync({
    open: true,
    port: 3000,
    server: {
        baseDir: "./",
        middleware: [proxy(proxyOptions)]
    },
    files: paths.css
});

这篇关于咕嘟咕嘟浏览器同步 - 重定向通过代理API请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！