咕嘟咕嘟浏览器同步 - 重定向通过代理API请求 [英] Gulp browser-sync - redirect API request via proxy

问题描述

我想我这样的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?

推荐答案

结帐的官方文档关于使用BrowserSync与咕嘟咕嘟。我是能够得到BrowserSync起来，并与 / API 代理没有问题运行。

Checkout the official documentation about using BrowserSync with Gulp. I was able to get BrowserSync up and running with a proxy on /api with no issue.

检查，以确保没有其他正在使用端口 8000 。你可以改变什么端口BrowserSync通过 端口选项时使用初始化BrowserSync 。

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请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！