Apache configuration: automatic renaming of "file:///C:/xampp/htdocs/" to "localhost" in url when opening a local html file

I'm new to web development so bear with me. I might be missing something despite all my searches.

When I open an html file (of course from a directory served by Apache), it opens in a browser but the url is:

file:///C:/xampp/htdocs/path/to/file.html

This way it does not get served by Apache, so for that to work I have to rename the host-part of the path to the host's name. So if the host-path is

C:/xampp/htdocs/

then I have to rename that part of the url to the hostname, in this case "file:///C:/xampp/htdocs/path/to/file.html" must be renamed to "localhost/path/to/file.html" if Apache is to serve the page.

I've tried adding a virtual host that includes the "file:///" in its path but that crashes Apache (and xampp).

Question: Is there a way to avoid this manual renaming of urls when opening local html files to be served by Apache?

Solution

Made a little "url2hostname" extension to chrome that saves me the 1.42 seconds of url clicking and renaming every time i open a local html file in chrome. I'll write it down for consistency and repetition.

I have a virtual host set up for a dropbox directory. So in httpd-vhosts.conf:

<VirtualHost *>
    DocumentRoot "C:\Users\hns\Dropbox\Webb"
    ServerName localhost
    <Directory "C:\Users\hns\Dropbox\Webb>
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory> </VirtualHost>

So in "C:\Users\hns\Dropbox\Webb" is where I keep lots of webpages that I just want to test locally (and they must be served by apache to work properly). When I open them in chrome the url gets messed up like "file:///C:/Users/hns/Dropbox/Webb/f/index.html" for example. So in this case I have to select the "file:///C:/Users/hns/Dropbox/Webb"-part of the url and rename that to the servername so it becomes: "http://locahost/f/index.html".

So when I've opened a local html file and click the chrome extension it just replaces the path and protocol in the url and goes to the resulting url (which is then loaded correctly):

chrome.browserAction.onClicked.addListener(function() { 

    chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
        var currentURL = tabs[0].url;
        newURL = currentURL.replace("file:///C:/Users/hns/Dropbox/Webb", "http://localhost");
        chrome.tabs.update(tabs[0].id, {url: newURL});
    })
});

Hey, at least I learned something :)

EDIT:

The real problem was not Apache but Chrome and cross origin:

Due to the "same origin policy", sometimes sites content cannot be properly displayed locally. So in my case the problem could have been solved by just turning that policy off by starting chrome from a shortcut with flags like –allow-file-access-from-files or –disable-web-security.