dotnet / dotnet/yarp

Blazor Server + YARP - Static Files (CSS/JS) 404 & Circuit Failed to Initialize

Open
#2,782 2 comments 0 reactions 1 assignee Claimed by @benjaminpetit View on GitHub
Dominant language
C#
Stars
9.6k
Forks
933
Avg merge
12d 18h
Merged PRs (30d)
2

Description

Hello community,

I am currently implementing YARP (Yet Another Reverse Proxy) in my Blazor Server application to proxy multiple existing projects. However, I am encountering the following issues:

1. **Static files (CSS, JS, etc.) are not loading (404 errors)**

- The browser console shows multiple Failed to load resource: the server responded with a status of 404 errors for CSS and JS files.

![Image](https://github.com/user-attachments/assets/1f239915-8dc6-4415-a38a-43e6ed072c26)

2. Blazor Circuit Initialization Failure

**- After the WebSocket connection is established, I get the following error:**

[**Error**] The circuit failed to initialize.
Connection disconnected.

**### Project Setup & Code Snippets**
**Program.cs Configuration**

```
builder.Services.AddReverseProxy();
builder.Services.AddSingleton();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAntiforgery();

app.UseAuthentication();
app.UseAuthorization();

app.MapReverseProxy();

app.MapRazorComponents().AddInteractiveServerRenderMode();

app.Run();

```
**DynamicProxyConfigProvider.cs (Route & Cluster Configuration)**

```
routes.Add(new RouteConfig
{
RouteId = routeId,
ClusterId = clusterId,
Match = new RouteMatch { Path = $"{proxiedUrl}/{{**catch-all}}" },
Transforms = new List>
{
new Dictionary { { "PathRemovePrefix", proxiedUrl } }
}
});

clusters.Add(new ClusterConfig
{
ClusterId = clusterId,
Destinations = new Dictionary
{
{ "destination", new DestinationConfig { Address = item.Url } }
}
});

```
**Index Page (Navigation to Proxy URL)**

```

string sanitizedTitle = Uri.EscapeDataString(item.Title.Trim().Replace(" ", "-").ToLower());

string proxiedUrl = $"/system/{sanitizedTitle}-{item.Id}";

Navigation.NavigateTo(proxiedUrl, true);

```

### **Steps to Reproduce:**
1. Set up a Blazor Server application with YARP.
2. Proxy an external Blazor app via YARP.
3. Open the browser and check the console (F12).
4. Observe the 404 errors for static files.
5. Attempt to initialize a Blazor session and note the circuit failure.

**What I Have Tried:**
-Ensured Static Files Exist in wwwroot.
-Added UseStaticFiles() before UseRouting().
-Checked _content/ Paths for Blazor resources.
-Enabled WebSockets in YARP.
-Modified appsettings.json to match YARP paths.

**Expected Behavior:**
-Static files should load correctly.
-Blazor Circuit should initialize without failure.

**Environment:**

- .NET Version: net9.0
- YARP Version: 2.3.0
- Blazor Server Framework Version: net9.0
- Hosting Environment: Localhost (https://localhost:7287)
- Browser: Edge

**### Questions:**

1. How do I ensure YARP properly serves static files?
2. How can I debug Blazor Circuit Initialization Failure through YARP?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.