Blazor静态SSR表单提交未遵循Base Href问题排查与解决

概念错误总结 #

1. Base Href路径混淆：你混淆了外部访问路径与.NET应用的内部实际路径。反向代理会移除temp段后再转发请求，所以应用实际接收的请求路径是/api/blazor/*，而非外部访问的/temp/api/blazor/*，但你将base href设置为外部路径，导致前端生成的URL包含temp，与反向代理的转发逻辑冲突。
2. EditForm提交路径依赖默认行为：未显式指定EditForm的Action属性时，表单会默认使用当前页面的路径生成提交URL，而外部路径与内部应用路径的不一致，导致提交路径缺少temp段。
3. InteractiveServer模式下HttpContext的误解：InteractiveServer通过SignalR维护长连接，仅在初始HTTP渲染阶段存在HttpContext，后续交互为SignalR消息，直接访问HttpContext会返回空值，你错误地认为该模式下全程可直接获取HttpContext。

解决方案 #

1. 修正Base Href与路由配置 #

因为反向代理会剥离temp段，应用实际运行的根路径是/api/blazor/，所以：

• 修改App.razor中的base href为内部实际路径：

<base href="/api/blazor/" />

• 确保Program.cs中Blazor路由配置匹配内部路径：

app.MapBlazorHub("/api/blazor/_blazor");
app.MapFallbackToPage("/api/blazor/{*path:nonfile}", "/api/blazor/_Host");

2. 显式指定EditForm的提交路径 #

表单提交的外部路径是/temp/api/blazor/api/login，对应内部路径为/api/blazor/api/login，在EditForm中显式指定Action：

<EditForm Model="@loginModel" Action="/api/blazor/api/login" OnValidSubmit="@HandleLogin">
    <!-- 表单输入组件 -->
</EditForm>

反向代理会自动将内部路径加上temp前缀，最终提交路径符合预期。

3. 解决InteractiveServer模式下HttpContext为空问题 #

方式一：通过IHttpContextAccessor保存初始上下文

• 在Program.cs注册服务：

builder.Services.AddHttpContextAccessor();

• 在登录组件中获取并保存初始HttpContext（仅初始渲染时可用）：

@inject IHttpContextAccessor HttpContextAccessor

@code {
    private HttpContext? _initialHttpContext;

    protected override void OnInitialized()
    {
        // 仅初始HTTP请求时能获取到HttpContext
        _initialHttpContext = HttpContextAccessor.HttpContext;
    }

    private async Task HandleLogin()
    {
        if (_initialHttpContext != null)
        {
            // 用保存的上下文处理登录逻辑，比如设置Cookie
            _initialHttpContext.Response.Cookies.Append("AuthToken", "your-auth-token");
        }
    }
}

方式二：使用HttpClient调用API（推荐）

放弃直接操作HttpContext，改用HttpClient调用登录API，更符合Blazor交互模式：

• 在Program.cs配置HttpClient的BaseAddress：

builder.Services.AddScoped(sp => 
{
    var httpContext = sp.GetRequiredService<IHttpContextAccessor>().HttpContext;
    var baseUri = new Uri($"{httpContext.Request.Scheme}://{httpContext.Request.Host}/api/blazor/");
    return new HttpClient { BaseAddress = baseUri };
});

• 在登录组件中注入并使用：

@inject HttpClient Http

@code {
    private async Task HandleLogin()
    {
        var response = await Http.PostAsJsonAsync("api/login", loginModel);
        // 处理登录响应，比如解析返回的Token
    }
}

内容的提问来源于stack exchange，提问作者Shahryar Saljoughi