Nodejs Express POST returns 404 error on https Xampp Apache server while proxied - html

Question

I'm running a Xampp Apache server on Windows and I'm trying to simply pass a value from a slider to my Node.js server. To do that I use the fetch method and post my values to /t/request.
If I replace "/t/request" with "http:localhost:3000/t/request" everything works fine locally, but not on any other machine, otherwise I get the "POST https://mywebsite.com/t/request 404 not found" error.
I am (to my knowledge) proxying Node.js in the Apache configs, so I can't see why I get this error whatever I do.
I have read that you need to set up SSL certificates for your Node.js server too, but I don't see why since Apache and Node.js communicate locally. Other people have said the same thing.
UPDATE: Changing http to https in the vhosts config file for proxying changes the error from a 404 to a 500.
My html js code that loads up on /t/imz7hyza
var sliderOutput = document.getElementById("rangeSlider");
sliderOutput.oninput = async function(){
try {
let obj = JSON.stringify({sliderVal: sliderOutput.value, buttonVal: buttonOutput.checked})
let obj2 = JSON.parse(obj)
const response = await fetch('/t/request', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*' },
body: obj,
});
console.log(obj)
} catch(err) {
console.error(`Error: ${err}`);
}
}
My server.ts code
import express, { NextFunction, Request, Response } from "express";
import cors from "cors";
import bodyParser from "body-parser";
const app = express();
var jsonParser = bodyParser.json();
app.use(express.json());
app.use(cors({origin: '*'}));
app.use(express.static('public'));
interface IUpdateSlider{
sliderVal: number
buttonVal: boolean
}
app.post("/t/request", async (req: Request<{}, IUpdateSlider, IUpdateSlider>, res: Response) => {
try {
let number = req.body.sliderVal
if(req.body.buttonVal) console.log(number, "on")
else console.log(number, "off")
res.status(200).send({
msg: "Read!"
})
res.end();
} catch (error) {
console.error(error);
res.status(500).send({
msg: "Internal server error."
})
}
})
app.listen(3000, () => {
console.log("server listening to port 3000");
})
My Apache httpd.conf. I have proxy, proxy_http, proxy_ajp, rewrite, deflate, headers, proxy_balancer, proxy_connect and proxy_html enabled, along with the required ssl modules.
Define SRVROOT "C:/xampp/apache"
ServerRoot "C:/xampp/apache"
ProxyPass /t/imz7hyza http://localhost:3000/
Listen 80
--modules here
ServerName localhost
<Directory />
AllowOverride none
Require all denied
</Directory>
DocumentRoot "C:/xampp/htdocs"
...
<VirtualHost *:443>
ServerAdmin mymail#gmail.com
DocumentRoot "C:/xampp/htdocs"
ServerName www.mywebsite.com
ErrorLog "logs/error.log"
SSLEngine on
SSLCertificateFile "conf/ssl.crt/mywebsite_com.crt"
SSLCertificateKeyFile "C:/xampp/apache/bin/server.key"
SSLCertificateChainFile "conf/ssl.crt/mywebsite_com.ca-bundle"
</VirtualHost>
My .httaccess file
ErrorDocument 404 /404.html
DirectoryIndex /index.html
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]
And finally my httpd-vhosts.conf file
<VirtualHost *:80>
ServerName www.mywebsite.com
Redirect permanent / https://mywebsite.com/
ProxyPass /t/request https://localhost:3000
ProxyPassReverse /t/request https://localhost:3000
</VirtualHost>
<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs/"
ServerName www.mywebsite.com
SSLEngine on
SSLCertificateFile "conf/ssl.crt/mywebsite_com.crt"
# SSLCertificateKeyFile "conf/ssl.key/server.key"
SSLCertificateKeyFile "C:/xampp/apache/bin/server.key"
<Directory "C:/xampp/htdocs/">
Options All
AllowOverride All
Require all granted
</Directory>
ProxyPass /t/request https://localhost:3000
ProxyPassReverse /t/request https://localhost:3000
</VirtualHost>