Webpack-dev-server: Routes with a dot not sent to proxy even when historyAPIFallback disabled

[Khauri]

• Operating System: macOS Catalina Version 10.15.6 (19G73)
• Node Version: 10.16.3
• NPM Version: 6.9.0
• webpack Version: 4.44.2
• webpack-dev-server Version: 3.11.0
• Browser: Google Chrome Version 86.0.4240.183 (Official Build) (x86_64)

• [x] This is a bug
• [ ] This is a modification request

Code

Webpack config: https://gist.github.com/Khauri/ab21cd6a5a52caf178ecd148c10a408e

Expected Behavior

When navigating to a route with a dot in the URL, ie /.Hgvs_p1NQV4AFEoM5470ceQg/status the request should be passed on to the proxied server.

Actual Behavior

The request instead shows a default express 404 error page saying Cannot GET /.Hgvs_p1NQV4AFEoM5470ceQg/status, suggesting that some middleware is responding with a 404 before the request is sent to the proxied server.

This does not happen with a build, only when using webpack-dev-server.

For Bugs; How can we reproduce the behavior?

~I can attempt to make a reproduction repo if necessary~

Reproduction repo: https://github.com/Khauri/webpack-dot-route-issue

1. Set up a proxy that routes all requests to a separate server using webpack-dev-server
2. Try to go to a route with a '.' in the URL

It's possible that publicPath, contentPath, or other configs may be relevant as well, but I'm really not sure.

If this is an issue of webpack parsing dot urls as assets I think an ideal solution may be some kind of hook that lets you bypass that behavior by simply returning true or false.

[alexander-akait]

I can attempt to make a reproduction repo if necessary

Please do it, otherwise I will close this issue

[Khauri]

It is here, please take a look: https://github.com/Khauri/webpack-dot-route-issue

[alexander-akait]

Help https://github.com/chimurai/http-proxy-middleware/issues/307?

[Khauri]

That explains it, thanks!

For anyone coming across this, I was able to fix it by changing the proxy config from:

proxy: {
  '**': {
    target: true,
    router: () => 'http://127.0.0.1:8080',
  }
}

to

proxy: [{
  target: true,
  context: () => true,
  router: () => 'http://127.0.0.1:8080',
}]

Also, the context property does not seem to work unless it was wrapped in an array for some reason.