The path-matching behaviour of devServer.proxy is different from http-proxy-middleware

[RexSkz]

The matching behaviour and the docs

Assume there's a config about devServer.proxy:

{
  '/bar': {
    target: '<url>',
  }
}

It can match not only the path /bar/123 (as expected) but also /foo/bar (not expected).

The English version of the document says that we should use ^/bar:

But the Chinese version gives us the code that uses just /bar:

Why it is not as expected

By default, /xxx is meant to match the paths that start with /xxx, not the paths that contains /xxx.

Various RESTful frameworks (Express, Koa, Gin, Django, Spring) and web servers (Nginx, Apache), as well as http-proxy-middleware which is used by vue-cli, follow this rule. The well-known library webpack-dev-server also follows this rule.

Why it happens

The cause is at prepareProxy.js#L73:

if (context) {
  // Explicit context, e.g. /api
  return pathname.match(context)
}

The String.prototype.match(re) function receives a parameter re; if re is not RegExp and does not have a Symbol.match method, it will be converted to a RegExp by using new RegExp(re).

So we are actually executing '/foo/bar'.match(/\/bar/), it works.

What to do then

Considering this project is in maintenance mode, the behaviour may not be changed; but maybe we can make it clearer in the document.

1. The Chinese version of the document should catch up with the English one.
2. A text about the slight difference between vue-cli and http-proxy-middleware should be added to the document.