C# Blazor Reverse Proxy Config - Apache, NGINX, Azure

What’s the Deal with Blazor, Apache, and NGINX?

Before we dive headfirst into configuring a reverse proxy, let’s answer a few burning questions.

What is Blazor?

Blazor is a web framework developed by Microsoft that lets you build interactive web applications using C# and .NET instead of JavaScript. It’s kind of like JavaScript’s cool cousin who wears a blazer (get it? Blazor?). More details here: Blazor on Wikipedia.

What is Apache?

Apache is one of the oldest and most widely used web servers. It’s basically the granddaddy of web servers and is still going strong. More details: Apache HTTP Server on Wikipedia.

What is NGINX?

NGINX (pronounced “Engine-X”) is a high-performance web server and reverse proxy. It’s faster and more lightweight than Apache, which makes it the cool kid on the block. More details: NGINX on Wikipedia.

What is Azure Application Gateway?

Azure Application Gateway is a cloud-based load balancer and reverse proxy service provided by Microsoft Azure. It manages incoming traffic, distributes it across multiple backend servers, and supports features like SSL termination, Web Application Firewall (WAF), and WebSockets. In short, it’s like an intelligent bouncer for your web apps, making sure requests get to the right place safely.

More details: Azure Application Gateway on Microsoft Docs.

What is a Reverse Proxy?

A reverse proxy sits between the user and the backend server, handling requests and forwarding them accordingly. Think of it like a personal assistant who takes messages and delivers them to the right department.

More details: Reverse Proxy on Wikipedia.

Challenges of Running Blazor Behind a Reverse Proxy

Blazor works great, but when you introduce a reverse proxy like Apache, NGINX, or Azure Application Gateway, things can get interesting:

1. WebSockets Confusion (Blazor Server) – Blazor Server relies on WebSockets, and if your reverse proxy isn’t configured properly, your app might just sit there awkwardly, refusing to work.
2. Base Path Problems (Blazor WASM) – If your reverse proxy modifies the base path, your Blazor WebAssembly app might break, requiring adjustments to the <base> tag.
3. Compression Woes – Some reverse proxies mess with compression settings, which can make Blazor WebAssembly apps load slowly.
4. CORS and Headers – Reverse proxies can sometimes block WebSocket connections or mess with necessary headers.

Setting Up a Reverse Proxy for Blazor

Nginx Configuration

Modify your Nginx configuration file (/etc/nginx/sites-available/default):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Then restart Nginx:

1
2

sudo nginx -t
sudo systemctl restart nginx

Apache Configuration

Enable necessary modules:

1
2

sudo a2enmod proxy proxy_http proxy_wstunnel
sudo systemctl restart apache2

Modify Apache configuration (/etc/apache2/sites-available/000-default.conf):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<VirtualHost *:80>
    ServerName yourdomain.com

    ProxyPreserveHost On
    ProxyPass / http://localhost:5000/
    ProxyPassReverse / http://localhost:5000/

    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule ^/(.*) ws://localhost:5000/$1 [P,L]
</VirtualHost>

Restart Apache:

1
2

sudo apachectl configtest
sudo systemctl restart apache2

Azure Application Gateway

For Azure, configure the backend pool and routing rules properly to allow WebSockets and avoid issues with CORS.

Key Ideas Table

References

• Blazor on Wikipedia
• Apache HTTP Server on Wikipedia
• NGINX on Wikipedia
• Reverse Proxy on Wikipedia

Happy coding, and may your proxies always forward correctly! 🚀