Using /*splat in app.all() does not work on v5

[djw-sl]

Hi,

I recently tried to upgrade to v5 from v4 and used the following guide:

https://expressjs.com/en/guide/migrating-5.html#path-syntax

Here is my app.all() that sets headers on all routes:

app.all('/api/*', function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, Accepts, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-Response-Time, X-CSRF-Token, Authorization',
  );
  res.setHeader('Access-Control-Allow-Methods', '*');
  res.setHeader('Access-Control-Expose-Headers', 'X-Api-Version, X-Request-Id, X-Response-Time');
  res.setHeader('Access-Control-Max-Age', '1000');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Expires', '-1');
  res.setHeader('Pragma', 'no-cache');
  next();
});

As per documentation:

The wildcard * must have a name, matching the behavior of parameters :, use / *splat instead of / *

I changed it to:

  app.all('/api/*splat'

This does not work. Anything I am doing wrong?

[krzysdz]

It definitely should work. What exactly doesn't work in your case? Is the handler skipped or do you get an error?

This simplified code works as expected:

const express = require("express");

const app = express();

app.all("/api/*sth", (req, res, next) => {
        res.setHeader("my-header", "a value");
        next()
});

app.get("/*p", (req, res) => res.send("ok"));

const server = app.listen(1234, () =>
        fetch("http://localhost:1234/api/random/path").then(r => {
                console.log(r.headers);
                server.close();
        })
);

[krzysdz]

In this case it may be easier to use app.use:

app.use("/api", (req, res, next) => {
    // set headers
    next();
});

.use matches on prefix (if path is specified), so there is no need to use the * parameter.

[Tate-CC]

Hi @krzysdz 👋

I think I'm also encountering a similar problem. If I have a route on /*splat it fails to match on requests to / whereas using /* would've matched on express 4.

So for example, the file

const express = require("express");

const app = express();

app.get("/*", (req, res) => res.send("ok"));

const server = app.listen(1234, () =>
	fetch("http://localhost:1234/").then(async r => {
					console.log(await r.text());
					server.close();
	})
);

Logs ok on express@4.21.1.

After migrating to express@5.0.1 the file looks like:

const express = require("express");

const app = express();

app.get("/*splat", (req, res) => res.send("ok"));

const server = app.listen(1234, () =>
	fetch("http://localhost:1234/").then(async r => {
					console.log(await r.text());
					server.close();
	})
);

Which logs Cannot GET / (alongside the rest of the HTML 😅).

[krzysdz]

Good catch @Tate-CC !

I did not notice it, but the path-to-regexp says

Wildcard parameters match one or more characters across multiple segments.

Looks like an optional group {} must be used - "/{*paramName}" is now (5.x) required for full compatibility with 4.x's "/*".

[wesleytodd]

Yep, what @krzysdz says is exactly the change I had to make in the PR to upgrade the express tests for this specific case. Example: 0264908#diff-f7dc29b565d7b8578bbabcd36d010c1eb95527acd5f1395bf3e1a2d4506360c5R712

I wonder if the docs for this could be improved?

[azadsingh99]

This issue happened because Express V5 introduces strict routing syntax, and the wildcard * must now be named (e.g., :splat) as a route parameter. However, simply renaming it as /api/* splat is not correct because * is no longer valid by itself. you should replace * with a named parameter using a colon (:)

I think you mis-matched the : and *

app.all('/api/:splat*', function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '');
res.setHeader(
'Access-Control-Allow-Headers',
'Origin, Accepts, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-Response-Time, X-CSRF-Token, Authorization',
);
res.setHeader('Access-Control-Allow-Methods', '');
res.setHeader('Access-Control-Expose-Headers', 'X-Api-Version, X-Request-Id, X-Response-Time');
res.setHeader('Access-Control-Max-Age', '1000');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Expires', '-1');
res.setHeader('Pragma', 'no-cache');
next();
});