如何使用 webpack 代理 devserver pathRewrite？答案

【问题标题】：How to use webpack proxy devserver pathRewrite?如何使用 webpack 代理 devserver pathRewrite？
【发布时间】：2019-07-15 01:48:23
【问题描述】：

我目前正在努力重写 api 服务器的代理路径。在我的设置中，我所做的是针对 api 请求，我将其委托给代理服务器，并且仅使用 js/html/css webpack-dev-server。

以下是我正在使用的：

devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: true,
    publicPath: 'http://localhost:8080/dist/',
    disableHostCheck: true,
    proxy: {
        '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'???' : ''} //Need to append http://localhost:3000/MySite1/api
  }
}

那么，如何在 /MySite1 代理到 localhost:3000 之前将其附加到 api 请求？

例如如果请求是： http://localhost:8080/api，应该重新写给http://localhost:3000/MySite1/api

另外，如果请求是： http://localhost:8080, 它应该重新写信给http://localhost:3000/MySite1

【问题讨论】：

标签： javascript angular webpack webpack-dev-server webpack-4

【解决方案1】：

创建 proxy.config.json

{
  "/api/*": {
    "target": "http://localhost:3000/MySite1/api",
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug"
  }
}

^/api 部分将被替换为目标

然后启动应用程序

ng serve --proxy-config proxy.config.json

【讨论】：

我想在 /api 之前附加 /MySite1 不忽略
抱歉，我仍在编辑我的文件以匹配您的文件，应该可以使用
不，我的意思是如果请求是localhost:8080/api，它应该重新写到localhost:3000/MySite1/api

【解决方案2】：

尝试以下操作：

devServer: {
inline: true,
port: 8080,
historyApiFallback: true,
publicPath: 'http://localhost:8080/dist/',
disableHostCheck: true,
proxy: {
     '/api': {
     target: 'http://localhost:3000',
      pathRewrite: function(path, req) {
       var replacedPath = path;
       if (path.indexOf("MySite1") === -1) {
         replacedPath = replacedPath.replace("/", "/MySite1/api/");
       }
       return replacedPath;
     },
  }
}

【讨论】：