15

I am using webpack-dev-server proxy:

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

Requests take too much time. Chrome network panel shows this: enter image description here

Why this happens? How to solve this problem?

Sergey Tyupaev
  • 1,264
  • 9
  • 23
  • Have you resolved the issue somehow, please? i have similar problem – VladoDemcak Feb 23 '18 at 21:13
  • have you make a configuration on your DNS? it needs some time and then it works again efficiently – Paraskevas Ntsounos Jun 25 '18 at 12:45
  • 2
    Maybe related to this issue : https://github.com/webpack/webpack-dev-server/issues/161 (though I am not sure why bounty such an old question, since I doubt OP will answer any question on their problem) – Seblor Jun 25 '18 at 12:47
  • Is the grapic a filtered list of network activity? If so it looks consistent with standard queuing for more than 6 connections from a single source. – lossleader Jul 01 '18 at 11:54
  • can you attach the screenshot hovering the waterfall graphs that you marked in the above screen shot – karthik Jul 01 '18 at 13:17
  • Thank you @Selbor! Would be better to put it as answer indicating the source too – Orkhan Alikhanov Aug 12 '19 at 04:23

3 Answers3

5

The grey part in the request time graph is called stalled-time and the light-grey part(after grey) is queuing time. You can see the same if hover on the waterfall graphs. Here is whats causing issue and what stalled time means.

Stalled/Blocking

Time the request spent waiting before it could be sent. This time is inclusive of any time spent in proxy negotiation. Additionally, this time will include when the browser is waiting for an already established connection to become available for re-use, obeying Chrome's maximum six TCP connection per origin rule.

(If you forget, Chrome has an "Explanation" link in the hover tooltip and under the "Timing" panel.)

Basically, the primary reason you will see this is because Chrome will only download 6 files per-server at a time and other requests will be stalled until a connection slot becomes available.

This isn't necessarily something that needs fixing, but one way to avoid the stalled state would be to distribute the files across multiple domain names and/or servers, keeping CORS in mind if applicable to your needs, however HTTP2 is probably a better option going forward. Resource bundling (like JS and CSS concatenation) can also help to reduce amount of stalled connections.

Alternatively you can de-priotise the requests and triggeer then at the end that are taking long time so that rest of the requests wont wait for the slow runners.

Community
  • 1
  • 1
karthik
  • 1,100
  • 9
  • 21
4

I was facing similar issues where every proxied request took 5 seconds or more with a setup something like this:

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

And in the hosts file:

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

When I changed the proxy to point to the IPv6 loopback address the problem went away. So like this:

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

To be able to use the actual hostname in the proxy configuration instead of the loopback address, I edited my hosts file to contain all hostname entries on a single line and point them to both IPv4 and IPv6 loopback addresses. So like this:

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

Now the latency is gone and it works as expected.

Timo
  • 2,740
  • 1
  • 24
  • 22
  • This issue cropped up for me today (~4 years after initial post) and this solution of `::1` somehow worked for me. – John Fisher Sep 28 '20 at 18:20
0
devServer: {
   proxy: {
      '/api': {
        target: 'http://mybackedn.url',
        changeOrigin: true,
        headers: {
          Connection: 'keep-alive' // add this can fix this issue
        }
      }
   }
}
徐大牛
  • 1
  • 1