Blazor WebAssembly如何通过POST请求跳转至第三方支付网关？

Blazor WebAssembly是纯客户端应用，NavigationManager.NavigateTo仅支持GET请求跳转，无法直接发起POST跳转。要实现POST传递form-data参数并跳转，核心思路是动态生成HTML表单并自动提交，和PHP里的自动提交表单逻辑一致。

具体实现步骤 #

1. 组件内实现触发逻辑 #

直接在Blazor组件中编写触发支付跳转的方法，通过JS互操作完成表单生成与提交：

@inject IJSRuntime JSRuntime

<button @onclick="InitiatePayment">发起支付</button>

@code {
    private async Task InitiatePayment()
    {
        // 构造支付参数（敏感参数不会暴露在URL中）
        var paymentParams = new Dictionary<string, string>
        {
            {"merchant_id", "你的商户ID"},
            {"order_no", "20240520001"},
            {"amount", "99.00"},
            {"sign", "加密签名串"},
            // 第三方要求的其他参数
        };

        // 调用JS方法提交表单
        await JSRuntime.InvokeVoidAsync("submitPaymentForm", 
            "https://第三方支付网关地址", 
            paymentParams);
    }
}

2. 添加JavaScript交互代码 #

在wwwroot/index.html中添加用于生成并提交表单的JS代码：

window.submitPaymentForm = function (actionUrl, formData) {
    // 创建表单元素
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = actionUrl;
    form.target = '_self'; // 设为_blank可在新窗口打开，按需调整

    // 遍历参数生成隐藏输入框
    Object.keys(formData).forEach(key => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = formData[key];
        form.appendChild(input);
    });

    // 挂载表单并提交
    document.body.appendChild(form);
    form.submit();
    // 提交后移除表单（可选）
    setTimeout(() => document.body.removeChild(form), 100);
};

关键说明 #

• 参数安全：敏感参数通过隐藏input传递，不会出现在URL中，避免GET请求的参数暴露风险。
• 跳转控制：修改form.target可控制跳转窗口，_self在当前页跳转，_blank打开新窗口，适配第三方支付的要求。
• 兼容性：基于标准HTML表单提交逻辑，所有现代浏览器都支持，和PHP的实现逻辑完全对齐。
• 回调处理：若第三方支付有同步回调，可在你的Blazor回调页面接收参数，务必验证签名防止数据篡改。

内容的提问来源于stack exchange，提问作者Fitri Halim