如何使用webpack代理devserver pathRewrite?

时间:2019-07-15 01:48:23

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

我目前正在努力将代理路径重写为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
  }
}

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

例如 如果请求是: http://localhost:8080/api,它应该重新写入http://localhost:3000/MySite1/api

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

2 个答案:

答案 0 :(得分:1)

尝试以下操作:

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;
     },
  }
}

答案 1 :(得分:0)

创建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