如何在Blazor的NavigationManager.NavigateTo中添加自定义请求头

首先明确：浏览器的默认重定向机制（包括HTTP 3xx状态码跳转、前端location.href或Blazor的NavigationManager.NavigateTo）无法主动添加自定义请求头，这是浏览器的安全策略限制，所以只能通过替代方案实现隐藏参数传递的需求。

以下是几种可行的实现方式：

1. 服务器端暂存参数后跳转（最安全） #

利用服务器缓存关联用户Session暂存敏感参数，跳转后再从服务器读取，参数全程不经过浏览器，适合高度敏感的数据。

实现步骤： #

（1）创建临时数据服务

public class TempDataService
{
    private readonly IHttpContextAccessor _httpContextAccessor;
    private readonly IMemoryCache _cache;

    public TempDataService(IHttpContextAccessor httpContextAccessor, IMemoryCache cache)
    {
        _httpContextAccessor = httpContextAccessor;
        _cache = cache;
    }

    // 存储参数，关联用户Session
    public void StoreSensitiveData(string key, object data)
    {
        var sessionId = _httpContextAccessor.HttpContext.Session.Id;
        _cache.Set($"{sessionId}_{key}", data, TimeSpan.FromMinutes(5)); // 设置5分钟过期，避免内存占用
    }

    // 读取并删除参数，防止重复使用
    public T RetrieveSensitiveData<T>(string key)
    {
        var sessionId = _httpContextAccessor.HttpContext.Session.Id;
        if (_cache.TryGetValue($"{sessionId}_{key}", out T data))
        {
            _cache.Remove($"{sessionId}_{key}");
            return data;
        }
        return default;
    }
}

（2）注册服务和Session

在Program.cs中添加：

builder.Services.AddHttpContextAccessor();
builder.Services.AddMemoryCache();
builder.Services.AddScoped<TempDataService>();
// 配置Session
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(10);
    options.Cookie.HttpOnly = true;
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // 生产环境启用HTTPS时设置
});

// 中间件顺序：Session要放在Routing之后，Authorization之前
app.UseSession();

（3）发起跳转的组件

@inject NavigationManager NavManager
@inject TempDataService TempData

<button @onclick="NavigateWithHiddenParams">跳转至目标页面</button>

@code {
    private void NavigateWithHiddenParams()
    {
        // 要传递的敏感参数
        var sensitiveParams = new { UserId = 1001, AuthToken = "xxxx-xxxx-xxxx" };
        // 暂存到服务器缓存
        TempData.StoreSensitiveData("UserAuthData", sensitiveParams);
        // 直接跳转
        NavManager.NavigateTo("/protected-page");
    }
}

（4）目标页面读取参数

@page "/protected-page"
@inject TempDataService TempData

<h3>受保护页面</h3>

@if (UserAuthData != null)
{
    <p>用户ID：@UserAuthData.UserId</p>
    <p>授权令牌：@UserAuthData.AuthToken</p>
}

@code {
    private dynamic UserAuthData { get; set; }

    protected override void OnInitialized()
    {
        UserAuthData = TempData.RetrieveSensitiveData<dynamic>("UserAuthData");
    }
}

2. 用表单POST提交（简单易实现） #

将参数放在表单隐藏字段中，通过POST请求提交到目标页面，参数不会出现在URL中，适合非极致敏感的数据。

实现代码： #

发起跳转的组件

@inject IJSRuntime JSRuntime

<button @onclick="SubmitHiddenForm">提交并跳转</button>

<!-- 隐藏表单 -->
<form id="hiddenParamForm" method="post" action="/target-page">
    <input type="hidden" name="OrderId" value="OD20240501" />
    <input type="hidden" name="OrderSecret" value="abc123xyz" />
</form>

@code {
    private async Task SubmitHiddenForm()
    {
        // 通过JS提交表单
        await JSRuntime.InvokeVoidAsync("document.getElementById('hiddenParamForm').submit()");
    }
}

目标页面接收参数

@page "/target-page"

<h3>订单详情页</h3>

@if (OrderParams != null)
{
    <p>订单ID：@OrderParams.OrderId</p>
    <p>订单密钥：@OrderParams.OrderSecret</p>
}

@code {
    public class OrderModel
    {
        public string OrderId { get; set; }
        public string OrderSecret { get; set; }
    }

    // 从表单请求体中绑定参数
    [SupplyParameterFromForm]
    public OrderModel OrderParams { get; set; }
}

3. 加密Cookie传递（适合小数据） #

将敏感参数加密后存入Cookie，跳转后服务器读取并解密，注意Cookie的大小限制（约4KB）和安全配置。

核心要点： #

• 必须对参数进行加密（比如使用DataProtectionProvider）
• Cookie设置HttpOnly、Secure、SameSite=Strict属性，防止XSS和CSRF攻击
• 读取后立即删除Cookie，避免残留

各方案对比 #

内容的提问来源于stack exchange，提问作者Jay Imerman