Question

我正在尝试将BrowserSync配置为在服务器模式下工作，并使用http-proxy-middleware将我的API请求代理到在不同端口上的同一台计算机上运行的后端。我使用Gulp启动BrowserSync。

BrowserSync在端口8081上运行。我的后端在8080上运行。

以下是我创建代理中间件的方法：

var proxyApi = proxy('/api', {target : 'http://localhost:8080/api', logLevel : 'debug'});

以下是我从Gulp任务中运行BrowserSync的方法：

// Init BrowserSync with proxies as middleware and based on the dest dir
browserSync.init({
    open: true,
    port: config.proxyPort,
    server: {
        baseDir: config.destDir,
        middleware: [proxyApi]
    },
    browser: "google chrome"
});

输出：

[HPM] Proxy created: /api  ->  http://localhost:8080/api

一切看起来都不错。

但是当我打到例如http://localhost:8081/api/users，输出为：

[HPM] GET /api/users/123 -> http://localhost:8080/api

...我的客户端收到404错误，因为/api本身与后端的任何内容都不匹配。

根据我从文档和示例中所理解的，目标实际上应该是http://localhost:8080/api/users/123

为什么路径的其余部分（在这种情况下为/users/123）被遗漏了？

使用以下版本：

"gulp": "3.9.1",
"browser-sync": "2.16.0",
"http-proxy-middleware": "0.17.1",

Answer 1

默认情况下，prependPath选项为true。此选项由基础库提供：http-proxy。

prependPath ：true / false，默认值： true - 指定是否要将目标的路径添加到代理路径

有两种方法可以解决此问题：

1。）将您的target从'http://localhost:8080/api'更改为'http://localhost:8080'

var proxyApi = proxy('/api', {target: 'http://localhost:8080', logLevel: 'debug'});

2.。）或者，您可以将选项prependPath设置为false。

var proxyApi = proxy('/api', {target: 'http://localhost:8080/api', prependPath: false, logLevel: 'debug'});

http-proxy-middleware不转发完整路径

1 个答案: