如何使用 http-proxy-middleware 从 browsersync 重定向/代理相对 url？答案

【问题标题】：How to redirect / proxy a relative url from browsersync using http-proxy-middleware?如何使用 http-proxy-middleware 从 browsersync 重定向/代理相对 url？
【发布时间】：2015-12-04 17:03:16
【问题描述】：

我有一个设置，我使用 browsersync（带有 gulp）来测试 html 模板。现在我有一个 html 模板，它有一个带有相对路径的链接标签：../css/style.css。

模板位于子文件夹/service/iframe。

我想使用中间件（或其他解决方案）将请求从/service/css/style.css 重定向到/css/_selfservice/style.css。但我就是想不通这是怎么做到的……

我现在拥有的：

...

var proxyOptions = proxyMiddleware('/service/css', {
    target: "/css/_selfservice",
    changeOrigin: true,
    pathRewrite: {
        '/service/css/' : ''      // remove old path
    }
});

...

browserSync( {

    server: {

        baseDir: './build',

        middleware: [ proxyOptions ]

    }


});

任何帮助将不胜感激！

【问题讨论】：

标签： javascript gulp middleware browser-sync node-http-proxy

【解决方案1】：

http-proxy-middleware 是一个代理，它将（某些）请求代理到target 服务器。它提供了一些额外的功能来在需要时重写路径。

更正了您的 pathRewrite 配置。您只需要设置正确的目标服务器。我在示例中使用了'http://localhost:8000'：

var proxyOptions = proxyMiddleware('/service/css', {
    target: 'http://localhost:8000',
    changeOrigin: true,
    pathRewrite: {
        '^/service/css/' : '/css/_selfservice'      // rewrite path
    }
});

文档/配方：

https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/pathRewrite.md

或者；如果不需要将请求代理到另一台服务器，您可以使用：https://www.npmjs.com/package/http-rewrite-middleware

var rewriteModule = require('http-rewrite-middleware');
var rewriteMiddleware = rewriteModule.getMiddleware([
    {from: '^/service/css/(.*)$', to: '/css/_selfservice/$1'}
]);

【讨论】：

非常感谢。这为我节省了很多时间！