I have two websites on my Windows Server 2022 Datacenter (a VM on AWS). I set them up in sort of an unorthodox way. The first is at http://www.planetshah.com/pwv and the other is at http://www.planetshah.com/mixes. In other words, they're both under the same domain and separated only by different paths. This is causing some issues.
The issue is this: When I go to one (say planetshah.com/pwv), the path to certain files like favicon.ico and styles.css get cached in the browser. Then when I go to the other (planetshah.com/mixes), the browser seems to assume that I need the same files so it reaches out to the server to fetch them before I'm done even typing out the full url "planetshah.com/mixes". That is, as soon as it recognized "planetshah.com" in the url, it hits my server and fetches said files. I know this because I have console logs on my server and I see them printing out as soon as I finish typing "planetshah.com". Then when I complete the url ("planetshah.com/mixes") and hit enter, it fetches the rest (html files, javascript files, etc.), but it tries to use the styles and favicon files from the other site which of course doesn't work.
I'm running my server with Node.js and Express, and I'm using Bouncy (an npm package) to reroute the request to the appropriate port (where the particular site I want to get to is running). The code looks like this:
const bouncy = require('bouncy');
const express = require('express');
const path = require('path');
const { create, engine } = require('express-handlebars');
bouncy(function(req, bounce) {
const host = req.headers.host;
console.log(`host=${host}`);
console.log(`req.url = ${req.url}`);
if (host === 'planetshah.com' || host === 'www.planetshah.com') {
if (req.url.includes('/mixes') || req.url.includes('.mixes.')) {
console.log('bouncing to 8002');
bounce(8002);
} else if (req.url.includes('/pwv')) {
console.log('bouncing to 8004');
bounce(8004);
} else bounce(8000);
}
if (host === 'assertivesolutions.ca' || host === 'www.assertivesolutions.ca') {
console.log('bouncing to 8001');
bounce(8001);
}
if (host === 'fmshahdesign.com' || host === 'www.fmshahdesign.com') {
console.log('bouncing to 8003');
bounce(8003);
}
}).listen(80);
...
/******** PWV ********/
const pwvApp = express();
pwvApp
.use(express.static(path.join(__dirname, 'planetshah.com\\pwv')))
.listen(8004);
pwvApp.get('/*', function(req, res) {
console.log(`pwvApp.get(/*): req.url = ${req.url}`);
const url = req.url.trim();
let file = 'index.html';
if (url === '/pwvlogic.js') {
file = 'pwvlogic.js';
console.log('pwvApp.get(/*): sending pwvlogic.js');
} else if (url.startsWith('/pwv/')) {
const parts = url.split('/');
parts.splice(0, 2);
file = parts.join('/');
console.log(`pwvApp.get(/*): sending ${file}`);
} else if (url === '/favicon.ico') {
file = 'favicon.ico';
}
res.sendFile(path.join(__dirname, `planetshah.com\\pwv\\${file}`), function(err) {
if (err) {
res.status(500).send(err);
}
});
});
console.log('pwvApp listening on port 8004');
/******** Music Mixes ********/
const musicMixApp = express();
musicMixApp
.use(express.static(path.join(__dirname, 'planetshah.com\\mixes')))
.listen(8002);
musicMixApp.get('/*', function(req, res) {
console.log(`musicMixApp.get(/*): req.url = ${req.url}`);
const url = req.url.trim();
let file = 'index.html';
if (
url.endsWith('.mixes.js')
|| url.includes('.html')
|| url.endsWith('.mp3')
|| url.endsWith('.css')
) {
file = url.substring(7);
file = file.split('?')[0];
file = decodeURIComponent(file);
console.log(`file = ${file}`);
}
res.sendFile(path.join(__dirname, `planetshah.com\\mixes\\${file}`), function(err) {
if (err) {
res.status(500).send(err);
}
});
});
console.log('musicMixApp listening on port 8002');
So what happens is that the pwvApp runs on port 8004 and the musicMixApp runs on port 8002. All http requests go to port 80 where bouncy picks it up and reroutes it to a different port depending on req.headers.host and req.url. When the host is "planetshah.com" it checks if the url contains either "pwv" or "mixes" and routes it to either port 8004 or 8002 respectively.
I also have this in the <head> section of each html page of each website:
<link href="./styles.css" rel="stylesheet"/>
<link href="./favicon.ico" rel="icon"/>
The styles.css and favicon.ico files for each website sit in different folders at the same level as the html files that refer to them. So they are cleanly separated for each site and fetching them shouldn't be a problem... except when the browser assumes (wrongly) that I want the files from one site when really I want the files from the other site. Is there any way to stop this? Get around it? Thanks!
I solved the issue. I took a different approach. Instead of putting each site under the same domain but under a different folder, I created different subdomains (in AWS). So planetshah.com/pwv is now pwv.planetshah.com. This allows me to treat pwv.planetshah.com and mixes.planetshah.com as completely different domains and so my node server can treat them as such. This seems (so far) to have eliminated the problem.