2

我正在尝试将 BrowserSync 添加到我的 react.js 节点项目中。我的问题是我的项目通过 server.js 文件管理 url 路由、侦听端口和猫鼬连接，所以很明显，当我运行浏览器同步任务并检查 localhost url http://localhost:3000我得到一个Cannot GET / .

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

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

1 回答 1

3

我们有一个类似的问题，我们可以通过使用代理中间件（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，但如果您不在生产环境中处理它，则可能不值得为您的开发环境搞乱。

于 2015-04-09T22:26:17.033 回答