如何使用webpack-dev-server重写请求路径,使其指向同一域下的另一个路径?

tnkciper  于 12个月前  发布在  Webpack
关注(0)|答案(1)|浏览(134)

我想实现的是将请求URL更改为/**/locales/**/*.json,e。例如,使用webpack-dev-server将some.domain.com/subpath/locales/another/file.json更改为some.domain.com/locales/file.json。几天前我的配置工作正常,但现在我得到了一个EHOSTUNREACH错误,在移动我的代码并最终恢复到原始工作实现后,现在我得到了一个ETIMEDOUT错误。

<e> [webpack-dev-server] [HPM] Error occurred while proxying request some.domain.com/locales/file.json to https://some.domain.com/ [ETIMEDOUT] (https://nodejs.org/api/errors.html#errors_common_system_errors)

我正在使用我的主机文件来解析some.domain.com。我的实际配置是:

const HOST_DOMAIN = 'some.domain.com'

return {
  devServer: {
    server: { type: "https" },
    port: 443,
    compress: true,
    allowedHosts: "all",
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    client: {
      webSocketURL: `auto://${HOST_DOMAIN}/ws`,
    },
    proxy: {
      '/**/locales/**/*.json': {
        target: 'https://' + HOST_DOMAIN,
        pathRewrite: function (path) {
          const parts = path.split('/');
          return '/locales/' + parts.pop();
        },
        secure: false
      }
    },
    static: [
      {
        directory: path.join(__dirname, "src/locales"),
        publicPath: `/locales`,
      },
    ],
  },
  // ...
}

我也试过将originRewrite设置为true,但没有成功。
有没有可能做到这一点?如果是的话,这条路对吗?我不知道为什么它停止工作。

zqdjd7g9

zqdjd7g91#

虽然proxy选项可以在我的用例中用于实现URL重写,但我发现这不是它的主要目的,并且会带来限制并增加原始问题的复杂性。
因此,historyApiFallback选项更适合重写URL和提供静态文件,如文档中所述。
然后,webpack配置结果如下所示:

const path = require("path");

// ...
devServer: {
  historyApiFallback: {
    rewrites: [
      {
        from: /^\/([^/]+)\/locales\/(.+\.json)$/,
        to: context => `/locales/${path.basename(context.parsedUrl.pathname)}`
      },
    ],
  },
  // ...
}

上面的代码将拦截所有格式为/**/locales/**/*.json的请求,并使用to属性重写URL,在我的例子中,这是使用一个函数从context对象读取URL并提取文件名来创建提供静态文件的正确路径。

相关问题