Webpack-dev-server代理请求非常慢

Question

我正在使用webpack-dev-server代理:

devServer: {
        proxy: {
            '/api': {
                target: 'http://mybackedn.url',
                changeOrigin: true
            }
        }
    }

请求花费太多时间。 Chrome 网络面板显示如下：

为什么会出现这种情况？如何解决这个问题？

- Sergey Tyupaev

---

你解决了这个问题吗？我也遇到了类似的问题。 - VladoDemcak

你在DNS上进行了配置吗？它需要一些时间，然后它会再次有效地工作。 - Paraskevas Ntsounos

也许与这个问题有关：https://github.com/webpack/webpack-dev-server/issues/161（尽管我不确定为什么要悬赏这样一个老问题，因为我怀疑 OP 不会回答任何关于他们问题的问题） - Seblor

图形是否是网络活动的过滤列表？如果是，那么它看起来符合单个源超过6个连接的标准排队。 - lossleader

你能否附上在上面截图中标记的瀑布图悬停的屏幕截图？ - karthik

谢谢@Selbor！最好将其作为答案并指明来源。 - Orkhan Alikhanov

Answer 1

请求时间图表中的灰色部分称为停滞时间，浅灰色部分（在灰色之后）称为排队时间。如果将鼠标悬停在瀑布图上，则可以看到相同的内容。以下是问题的原因以及停滞时间的含义。

阻塞/停滞 请求在发送前等待的时间。此时间包括代理协商所花费的任何时间。此外，当浏览器等待已建立的连接可供重新使用时，此时间也将包括在内，遵循 Chrome 的每个源最多六个 TCP 连接规则。

（如果您忘记了，Chrome 在悬停工具提示和“计时”面板下有一个“说明”链接。）

基本上，您会看到这种情况的主要原因是因为 Chrome 一次只会下载每个服务器的6个文件，其他请求将被阻塞，直到连接插槽可用为止。

这并不一定需要修复，但避免陷入停滞状态的一种方法是将文件分布在多个域名和/或服务器上，考虑到您的需求，保持CORS在心中，然而HTTP2可能是更好的选择。资源捆绑（如JS和CSS串联）也可以帮助减少停滞连接的数量。

另外，您可以将请求设置为低优先级，并在长时间等待的情况下触发它们，以便其余请求不必等待缓慢的运行者。

- karthik

Answer 2

我遇到了类似的问题，使用类似下面这样的设置，每个代理请求都需要5秒或更长时间：

"proxy": [
    {
      "context": [
        "/api",
      ],
      "target": "http://my-backend-server.local:1234",
      "secure": false
    }
  ]

在hosts文件中：

127.0.0.1    my-backend-server.local
127.0.0.1    some-other-hostname.local
127.0.0.1    a-few-more-of-these.local

当我将代理更改为指向IPv6回环地址时，问题消失了。就像这样:

"proxy": [
    {
      "context": [
        "/api",
      ],
      "target": "http://[::1]:1234",
      "secure": false
    }
  ]

为了能够在代理配置中使用实际的主机名而不是回环地址，我编辑了我的主机文件，将所有主机名条目都放在单行上，并将它们指向IPv4和IPv6回环地址。就像这样：

127.0.0.1    my-backend-server.local some-other-hostname.local a-few-more-of-these.local
::1          my-backend-server.local some-other-hostname.local a-few-more-of-these.local

现在延迟问题已经解决，它的功能符合预期。

- Timo

---

今天我遇到了这个问题（距离最初的帖子已经过去了约4年），但是这个“::1”的解决方案在某种程度上对我起作用了。 - John Fisher

Answer 3

devServer: {
   proxy: {
      '/api': {
        target: 'http://mybackedn.url',
        changeOrigin: true,
        headers: {
          Connection: 'keep-alive' // add this can fix this issue
        }
      }
   }
}

- 徐大牛