Webpack开发服务器代理GET在需要数据时返回空JSON对象

Question

我正在运行一个本地FoundryVTT实例，其中包括两个资源：

1. dev-mode/lang/en.json (5.6 kB JSON)
2. http://localhost:30000/lang/en.json (24.9 kB JSON)

我已经设置了webpack-dev-server来启动一个带有热重载的代理，这是我想要用于开发的。我已经启用了我所能找到的所有日志记录，以解决我正在经历的问题：

devServer: {
  client: {
    logging: "verbose",
  },
  hot: true,
  devMiddleware: {
    writeToDisk: true,
  },
  static: false,
  proxy: {
    context: (pathname, req) => {
      // Don't proxy hot reload
      const proxy = !pathname.match("^/ws");
      console.log("[CONTEXT]", pathname, proxy);
      return proxy;
    },
    target: "http://localhost:30000",
    ws: true,
    logLevel: "debug",
    changeOrigin: true,
    //selfHandleResponse: true,
    onProxyReq: (proxyReq, req, res) => {
      try {
        const proxyHost = req?.headers?.host || "HOST?";
        const proxyUrl = `${req.protocol}://${proxyHost}${req.path}`;
        console.log(`[${req.method}] ${proxyUrl}`);
      } catch (error) {
        console.log("[ERROR]", "onProxyReq", error);
      }
    },
    onProxyRes: (proxyRes, req, res) => {
      try {
        const proxyHost = req?.headers?.host || "HOST?";
        const proxyUrl = `${req.protocol}://${proxyHost}${req.path}`;
        const targetHeader = proxyRes?.socket?._httpMessage?._header;
        const targetHost =
          /host:\s+(?<host>\S+)/.exec(targetHeader)?.groups?.host ||
          "HOST?";
        const url = `${proxyRes.req.protocol}//${targetHost}${proxyRes.req.path}`;
        const exchange = `[${req.method}] [${proxyRes.statusCode}] ${proxyUrl} -> ${url}`;
        console.log(exchange);
      } catch (error) {
        console.log("[ERROR]", "onProxyRes", error);
      }
    },
    onError: (err, req, res, target) => {
      console.log("[ERROR]", "onError", err, req, res, target);
    },
  },
},

我还使用DEBUG = "express:*"来运行它，以启用Express的日志记录。

通过代理(dev-mode/lang/en.json)访问第一个资源(dev-mode/lang/en.json)将按预期返回JSON。

devServer配置日志：

[CONTEXT] /modules/_dev-mode/lang/en.json true
[GET] http://localhost:8080/modules/_dev-mode/lang/en.json
[GET] [200] http://localhost:8080/modules/_dev-mode/lang/en.json -> http://localhost:30000/modules/_dev-mode/lang/en.json

Express调试日志：

express:router dispatching GET /modules/_dev-mode/lang/en.json +12m
express:router query  : /modules/_dev-mode/lang/en.json +1ms
express:router expressInit  : /modules/_dev-mode/lang/en.json +1ms
express:router compression  : /modules/_dev-mode/lang/en.json +1ms
express:router middleware  : /modules/_dev-mode/lang/en.json +0ms
express:router handler  : /modules/_dev-mode/lang/en.json +1ms

通过代理(http://localhost:8080/lang/en.json)访问第二个资源(http://localhost:8080/lang/en.json)不像预期的那样工作！而不是24.9 kB，它只返回{}。

在本例中，devServer配置不记录任何内容。

Express调试日志(注意，缺少了另一个示例中的处理程序行)：

express:router dispatching GET /lang/en.json +4m
express:router query  : /lang/en.json +0ms      
express:router expressInit  : /lang/en.json +0ms
express:router compression  : /lang/en.json +1ms
express:router middleware  : /lang/en.json +0ms 

据猜测，这个问题可能是由较大的JSON大小和块造成的。如果我跳过代理，就会按预期返回整个JSON。在不使用代理的情况下，请求头是这样的：

GET /lang/en.json HTTP/1.1
Host: localhost:30000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="99", "Google Chrome";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,sv;q=0.8
Cookie: session=5ec3bb8586ae5062804c72ae

以及响应头：

HTTP/1.1 200 OK
X-Powered-By: Express
Cache-Control: no-cache
Accept-Ranges: bytes
Last-Modified: Sun, 06 Mar 2022 09:01:38 GMT
ETag: W/"15127-17f5e767fee"
Content-Type: application/json; charset=UTF-8
Vary: Accept-Encoding
Content-Encoding: gzip
Date: Mon, 21 Mar 2022 19:09:01 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

我觉得代理内部出了什么问题，我不知道是什么原因。有什么明显的不正确的设置，或为我获得更多的日志或信息发生了什么？

Answer 1

通过在Visual代码中启用自动连接来调试代理。

问题是，代理使用.../<project>/dist/lang/en.json向.../<project>/dist/lang/en.json提供请求，而不是将请求转发给http://localhost:30000/lang/en.json。

在这种情况下，只应从文件夹/modules/<project>处理对.../<project>/dist下资源的请求。设置publicPath解决了以下问题：

devServer: {
  devMiddleware: {
    publicPath: "/modules/<project>"
  }
},