如何在同一端口上的一个XAMPP服务器上设置2个域？

Question

I have two different PHP application running on XAMPP server.

I need to be able to access both application using two different domain.

The first application will be local to the server "dev.app". The second app will be accessible from the internal network "staging.domain.com"

The internal IP for the server is 10.0.4.18.

In the httpd.conf I added the following line to run XAMPP on 10.0.4.18

Listen 10.0.4.18:80

Additionally, in the httpd-vhosts.conf I added the following code

#Staging
<VirtualHost *:443>

    DocumentRoot "F:/xampp/htdocs/staging"
    ServerAdmin [e-mail]
    ServerName staging.domain.com
    ServerAlias staging.domain.com

    SSLEngine On
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"

    <Directory "F:/xampp/htdocs/staging">
        AllowOverride All
        Require all Granted
    </Directory>

</VirtualHost>

#dev
<VirtualHost *:443>

    DocumentRoot "F:/xampp/htdocs/dev/public"
    ServerAdmin [e-mail]
    ServerName dev.app
    ServerAlias dev.app

    SSLEngine On
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"

    <Directory "F:/xampp/htdocs/dev/public">
        AllowOverride All
        Require all Granted
    </Directory>

</VirtualHost>

My hosts file looks like this

127.0.0.1        localhost
127.0.0.1        127.0.0.1
10.0.4.18        dev.app

However, when I open "dev.app" from the local server's browser, it redirects me to staging.domain.com.

How can I be able to access both domain without interfering?