如何重写请求路径，使其指向与webpack-dev-server同域下的另一个路径？

Question

我想要实现的是以'//locales//*.json'的格式更改请求URL，例如G。使用 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，但没有成功。

有可能实现这个目标吗？如果是这样，这是正确的方法吗？我不知道为什么它停止工作了。

Answer 1

虽然

proxy

选项可用于在我的用例中实现 URL 重写，但我发现这不是其主要目的，并且可能会带来限制并增加原始问题的复杂性。

因此，

historyApiFallback

选项更适合重写 URL 并提供文档中所述的静态文件。

然后，webpack 配置结果如下：

const path = require("path");

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

上面将拦截

/**/locales/**/*.json

格式的所有请求，并使用

to

属性来 重写 URL，在我的例子中，它使用一个从

context

对象读取 URL 并提取文件名的函数创建提供静态文件的正确路径。