node.js - 如何为使用动态 URL 路由的 Node/React 项目设置 gulp browser-sync

Question

我正在尝试将 BrowserSync 添加到我的react.js Node 项目中。我的问题是，当我运行浏览器同步任务并检查 localhost url http://localhost:3000 时，我的项目通过 server.js 文件管理 url 路由、监听端口和 Mongoose 连接。我收到无法获取/。

有没有办法强制浏览器同步使用我的 server.js 文件？我应该使用辅助 Nodemon 服务器还是其他东西(如果我这样做，跨浏览器同步如何工作)？我真的很迷茫，我看到的所有例子都增加了更多的困惑。帮助!!

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        },
        files: [
            'static/**/*.*',
            '!static/js/bundle.js'
        ],
    });
});

Answer 1

我们遇到了类似的问题，可以通过使用代理中间件(https://www.npmjs.com/package/proxy-middleware)来修复。 BrowserSync 允许您添加中间件，以便您可以处理每个请求。这是我们正在做的事情的精简示例:

var proxy = require('proxy-middleware');
var url = require('url');

// the base url where to forward the requests
var proxyOptions = url.parse('https://appserver:8080/api');
// Which route browserSync should forward to the gateway
proxyOptions.route = '/api'

// so an ajax request to browserSync http://localhost:3000/api/users would be 
// sent via proxy to http://appserver:8080/api/users while letting any requests
// that don't have /api at the beginning of the path fall back to the default behavior.

browserSync({
    // other browserSync options
    // ....
    server: {
        middleware: [
            // proxy /api requests to api gateway
            proxy(proxyOptions)
        ]
    }
});

最酷的一点是您可以更改代理指向的位置，以便您可以针对不同的环境进行测试。需要注意的一件事是，我们所有的路由都以/api 开头，这使得这种方法变得更加容易。选择要代理的路由会有点棘手，但希望上面的示例能为您提供一个良好的起点。

另一个选择是使用 CORS，但如果您不在生产中处理它，那么对于您的开发环境来说可能不值得打扰。