Apache VirtualHost Same domain for Front and API

I have a multi-tenant application that is resolved using subdomains with the pattern *.localhost. The front-end of the application is accessible at http://localhost:3000/.

To achieve the desired functionality, I need to proxy all requests that do not contain the /api path segment to the front-end URL, while requests with the /api path segment should be routed to the backend API.

For example:

• tenant1.localhost should be proxied to the front-end.
• tenant1.localhost/api should be proxied to the backend API.

I have attempted to configure the Apache server with the following settings:

        <VirtualHost *:80>
            ServerName localhost
            ServerAlias *.localhost

            RewriteEngine On
            RewriteCond %{HTTP_HOST} ^([^.]+)\.localhost$
            RewriteRule ^/api(/.*)?$ http://%1.localhost/api$1 [P]

            # Exclude phpMyAdmin from being proxied
            ProxyPass /phpmyadmin !

            # Serve http://localhost:3000/ for all other requests
            ProxyPass / http://localhost:3000/
            ProxyPassReverse / http://localhost:3000/

        </VirtualHost>

        <VirtualHost *:80>
            ServerAdmin webmaster@localhost
            DocumentRoot "C:/Users/api/public"
            ServerName api.localhost
            ServerAlias *.localhost/api
            <Directory "C:/Users/api/public">
                Options All
                AllowOverride All
                Require all granted
            </Directory>
        </VirtualHost>

However, this configuration is not working as expected.