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

http-proxy-middleware does not forward the full path

本文关键字：路径 转发 Http-proxy-middleware      更新时间：2023-09-26

我正在尝试配置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",

默认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'});
相关文章：