Handling # symbols in filenames when serving static assets

[rishighan]

I have a service configured to serve static assets like so:

//...
{
    path: "/userdata",
    use: [ApiGateway.serveStatic("userdata")],
},

//...

Everything is working fine, until I encounter a filename with a # in it. An example is:

http://localhost:3000/userdata/covers/Ultimate%20Iron%20Man%20II%20-%2001/Ultimate_Iron_Man_#001_000a.jpg

I use this in my UI to render a thumbnail, however, whenever my UI makes a request for the path, I get a 404 Not Found

Summary
URL: http://localhost:3000/userdata/covers/Ultimate%20Iron%20Man%20II%20-%2001/Ultimate_Iron_Man_#001_000a.jpg
Status: 404 Not Found
Source: Network
Address: 127.0.0.1:3000
Initiator: 
react-dom.development.js:683

Request
GET /userdata/covers/Ultimate%20Iron%20Man%20II%20-%2001/Ultimate_Iron_Man_ HTTP/1.1
Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Accept-Encoding: gzip, deflate
Host: localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Safari/605.1.15
Accept-Language: en-US,en;q=0.9
Referer: http://localhost:3050/
Connection: keep-alive

Response
HTTP/1.1 404 Not Found
Transfer-Encoding: Identity
Content-Type: application/json; charset=utf-8
Connection: keep-alive
Date: Mon, 12 Jul 2021 22:55:59 GMT
X-Request-ID: 2c3e581f-e825-4714-9f79-4ac4e0e6fb1a

My service is saying this:

{"name":"ServiceNotFoundError","message":"Service 'covers.Ultimate%20Iron%20Man%20II%20-%2001.Ultimate_Iron_Man_' is not found.","code":404,"type":"SERVICE_NOT_FOUND","data":{"action":"covers.Ultimate%20Iron%20Man%20II%20-%2001.Ultimate_Iron_Man_"}}

Seems as though everything after the # symbol is getting truncated, so the request URL is malformed.

Why is this happening?

[ColinFrick]

You have to escape # in the URL with %23

[rishighan]

That was it! Thanks!