如何在Blazor WebAssembly应用中路由回服务器端页面？

1. 修正服务器端中间件顺序 #

路由失效的核心原因大概率是中间件顺序错误，在服务器端Program.cs中调整中间件顺序，确保服务器端页面/控制器路由优先于Blazor的 fallback：

var app = builder.Build();

// 保留原有静态文件、异常处理等中间件
app.UseStaticFiles();
app.UseExceptionHandler("/Error");

// 路由、授权中间件必须放在页面映射前
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

// 先映射Razor Pages，再映射MVC控制器，最后处理Blazor的 fallback
app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");

注意：Blazor的MapFallbackToFile必须放在最后，否则会接管所有未匹配的路由，导致服务器端页面无法被命中。

2. 规范Razor页面配置 #

在服务器端Pages文件夹下创建Payment.cshtml及对应的代码文件，确保页面路由和结构正确：

• 页面文件Payment.cshtml顶部指令：

@page "/payment"
@model YourApp.Server.Pages.PaymentModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@attribute [Authorize] // 若需授权访问，添加此特性

<h1>支付页面</h1>
<!-- 嵌入支付服务商的DropIn组件代码 -->

• 代码文件Payment.cshtml.cs（处理后台逻辑和敏感信息）：

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Configuration;

namespace YourApp.Server.Pages;

public class PaymentModel : PageModel
{
    private readonly IConfiguration _config;
    public string PaymentApiKey { get; set; }

    public PaymentModel(IConfiguration config)
    {
        _config = config;
    }

    public void OnGet()
    {
        // 从配置文件读取敏感密钥，避免前端暴露
        PaymentApiKey = _config["PaymentSettings:ApiKey"];
    }
}

3. Blazor端正确触发跳转 #

在Blazor组件中跳转时，必须强制浏览器发起服务器请求，避免Blazor客户端路由接管：

@inject NavigationManager NavManager

<button @onclick="GoToPayment">前往支付</button>

@code {
    private void GoToPayment()
    {
        // forceLoad: true 强制浏览器向服务器发起新请求
        NavManager.NavigateTo("/payment", forceLoad: true);
    }
}

4. 排查路由冲突与访问性验证 #

• 检查自定义页面路由（如/payment）是否与Identity默认路由冲突，若冲突可修改为@page "/checkout/payment"这类更具体的路径
• 直接在浏览器地址栏输入服务器端页面路由（如https://your-domain/payment），验证是否能正常访问：
  • 若无法访问，检查页面文件是否在服务器端项目的Pages文件夹下
  • 查看服务器日志，确认是否有路由匹配失败的错误信息

5. 敏感信息安全处理 #

服务器端页面中，将读取到的API密钥通过模型传递到前端组件，避免直接硬编码：

<script src="支付服务商的DropIn组件脚本地址"></script>
<script>
    // 通过模型注入敏感密钥，仅在服务器端渲染时生成
    const dropinInstance = createDropIn({
        apiKey: '@Model.PaymentApiKey',
        // 其他组件配置项
    });
</script>

内容的提问来源于stack exchange，提问作者Brett JB