Chrome bypassing server when making static requests to localhost - express

I have a node express app with middleware that's intercepting all calls before it serves static content:
app.use((req, res, next) => {
console.log(`Request: ${req.url}`)
next()
})
app.use('/', express.static('public'))
The public directory serves up a static website.
I get the initial document request logged when loading the site for the first time, but when I click a link on the site the static HTML content IS loaded, BUT
the chrome dev tools don't show any network request
the express middleware doesn't log any request
I'm trying to debug this middleware (there's additional logic to add), but Chrome isn't even making the request to the localhost express server and seemingly just loads the content direct from disk.
How can I get Chrome to send all localhost requests to the express server?

Related

How do I make a reverse proxy with nginx on my dockerized express server?

I currently have two docker containers:
- Frontend, which is ran with the flag -p 80:3000 to map my react app to my domain to serve the content
- Backend, which is ran with the flag -p 3001:3001 to map my backend(nodejs/express) to port 3001, where i will access the API routes
When my backend container is running, I can, for example, run curl localhost:3001/example and it will GET the api response back.
My problem is that I have just set up CloudFlare for my domain, so I now have HTTPS enabled, which Express does not support right out of the box (I also tried createServer with https, it didn't work). After doing some research, I discovered that I should be making a reverse proxy with nginx to have those HTTPS requests work with my HTTP server. Is this possible? Currently my backend won't work on my deployed website when I access the HTTPS routes and try to call to it. How do I go about setting up the reverse proxy to allow the HTTPS requests to go into HTTP ? Should I be somehow getting SSL certificate information and putting it somewhere as well? I've been trying to look up tutorials online, but none seem to address something like this from what I could find. Additionally, I found someone on SO that was having a similar problem, but it was never solved. here
For reference, here's a snippet of my backend if that's useful:
const express = require("express");
const webserver = express();
const cors = require("cors");
const mysql = require("mysql");
//connection pool creation
..
webserver.use(cors());
webserver.use(express.json());
// api routes
..
webserver.listen(PORT, () => {
console.log(`[Express] Server running on ${PORT}`);
});

Allowing HTTP API calls in Chrome

I am writing a test JSP-Servlet page that calls an HTTP API. But when I run the call in Chrome browser it is converting the call to HTTPS and the call fails. The API is not mine and the developer of the API insists that the call has to be on HTTP.
So is there a way to allow this API call using HTTP and prevent Chrome from converting it to an HTTPS call?
Note: I checked the Web and all are saying to change the browser settings. But we will not be able to tell each and every user of our site to do so!
Add this Script on top of your JSP File!
<script>
if (location.protocol == "https:") {
location.protocol = "http:";
</script>
Note:
First, location.protocol checks Url
and the second location.protocol will change it to http.
This will redirect your Client. If he visits your website as https: it will redirect him as http:

Blazor server side behind reverse proxy 404

I have a blazor server-side app hosted on IIS behind a reverse proxy (using ARR).
I have tried everything I can think of, but I keep getting 404 on
_framework/blazor.server.js
My base href is is set to "/subsite/":
<base href="/subsite/" />
and all my src values are relative like this:
<script src="_framework/blazor.server.js"></script>
<script src="_content/BlazorInputFile/inputfile.js"></script>
<script src="animations.js"></script>
Every other script ref loads fine, EVEN the _content data, but not the blazor.server.js.
I tried the old PathBase trick for MVC apps as well with no success:
if (!env.IsDevelopment()) {
app.Use((context, next) => {
context.Request.PathBase = new PathString("/subsite");
return next();
});
}
Can anyone tell me how to make Blazor realize where to put the blazor.server.js in a reverse proxy scenario?
Did you try the UsePathBase ?
app.UsePathBase("/subsite");
Here is my test result
Please check this article for more
https://www.billbogaiv.com/posts/net-core-hosted-on-subdirectories-in-nginx
From docs.
Rewrite URLs for correct routing
Routing requests for page components in a Blazor WebAssembly app isn't as straightforward as routing requests in a Blazor Server, hosted app. Consider a Blazor WebAssembly app with two components:
Main.razor – Loads at the root of the app and contains a link to the About component (href="About").
About.razor – About component.
When the app's default document is requested using the browser's address
bar (for example, https://www.contoso.com/):
The browser makes a request.
The default page is returned, which is usually index.html.
index.html bootstraps the app.
Blazor's router loads, and the Razor Main component is rendered.
In the Main page, selecting the link to the About component works on the client because the Blazor router stops the browser from making a request on the Internet to www.contoso.com for About and serves the rendered About component itself. All of the requests for internal endpoints within the Blazor WebAssembly app work the same way: Requests don't trigger browser-based requests to server-hosted resources on the Internet. The router handles the requests internally.
If a request is made using the browser's address bar for www.contoso.com/About, the request fails. No such resource exists on the app's Internet host, so a 404 - Not Found response is returned.
Because browsers make requests to Internet-based hosts for client-side pages, web servers and hosting services must rewrite all requests for resources not physically on the server to the index.html page. When index.html is returned, the app's Blazor router takes over and responds with the correct resource.
When deploying to an IIS server, you can use the URL Rewrite Module with the app's published web.config file. For more information, see the IIS section.
Maybe you could try to enable the forward proxy in IIS manager->server node->application request routing cache->proxy->enable.
If you only have one website, you could just add the website to ARR server farm and then it will create the routing rule automatically. It will be convenient to monitor the back-end server with health check.
Is this ARR warning causing my 404?

Setting up a website template system in node.js / hapi - virtual hosts

I am working to build a web application that can direct various domain names to template sites in hapi / node. Any suggestions on how I might best set this up would be appreciated. What I've tried is below:
Server 1 has a web application with template websites at /site1, /site2 etc.
Server 2 is a proxy server to direct domains to their proper place. I attempted to use node-http-proxy (https://github.com/nodejitsu/node-http-proxy#setup-a-basic-stand-alone-proxy-server) but it does not support proxying to a specific path, only a url.
//does not work
{
"domain1.com": "http://www.server1.com/site1,
"domain2.com": "http://www.server1.com/site1,
"domain3.com": "http://www.server1.com/site2
}
var server = http.createServer(function(req, res) {
proxy.web(req, res, { target: endpoints[req.headers.host] });
});

How to do routing/navigation in Elm without the # (hash) in the URL?

Using the UrlParser.parseHash function i was able to successfully parse the following url:
http://localhost:8000/MyRepl.elm/#home/something-else
The behavior is as expected, when i copy paste this in the browser and hit enter - the app loads with the appropriate view.
But now i want to remove the # and for this i used UrlParser.parsePath function. I kept the rest of the code exactly as before - but for some reason this doesn't work.
When i copy paste this and hit enter:
http://localhost:8000/MyRepl.elm/home/something-else - notice no #.
The browser creates a direct request to the elm -reactor localhost server.
There is no routing happening. The elm reactor server returns a 404 - as if there is no file named /MyRepl.elm/home/something-else
But routing without # should be possible because the http://package.elm-lang.org/packages - Docs site is written in elm and there is no # in the url as you can see.
Questions:
Anyone has experienced the same problem? Any ideas how to fix this?
Or can you point me to a repo where navigation without # works as expected?
You need a backend that servers your index page for every request. After serving the index page the routing will happen as usual in Elm.
For example in express it would look something like:
router.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
router.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
Elm reactor doesn't support this.
If you are using webpack you can do the same with the historyApiFallback attribute How to tell webpack dev server to serve index.html for any route