如何让WebView2发送JSON格式Body的POST请求？

原代码通过创建HTML表单提交的方式，只能发送application/x-www-form-urlencoded格式的请求，要改用JSON格式，必须放弃表单提交，改用JS的fetch或XMLHttpRequest API手动构造请求——这两种API支持自定义请求头和JSON请求体。

具体实现步骤 #

1. 序列化Payload为JSON字符串：在C#端将PostData.Payload序列化为标准JSON格式，注意转义特殊字符避免JS语法错误。
2. 构造JS请求代码：用fetch（推荐，现代浏览器支持）或XMLHttpRequest发送POST请求，设置Content-Type: application/json请求头，将JSON字符串作为请求体。
3. 可选：处理响应与重定向：如果后端返回重定向，需要手动处理页面跳转（fetch默认不会自动跳转）。

代码示例（使用fetch API） #

using System.Text.Json;

// 序列化Payload为JSON字符串
var jsonPayload = JsonSerializer.Serialize(parameters.PostData.Payload);
// 转义单引号，避免JS代码中出现语法冲突
var escapedJson = jsonPayload.Replace("'", "\\'");

// 构造发送JSON POST的JS脚本
var postScript = @$"
fetch('{parameters.Url}', {{
    method: 'POST',
    headers: {{
        'Content-Type': 'application/json'
    }},
    body: '{escapedJson}'
}})
.then(response => {{
    // 处理重定向：如果后端返回3xx跳转，手动跳转到目标URL
    if (response.redirected) {{
        window.location.href = response.url;
    }} else {{
        // 可选：解析响应数据（根据业务需求调整）
        return response.json().then(data => console.log('响应数据:', data));
    }}
}})
.catch(err => console.error('请求失败:', err));
";

await webView.ExecuteScriptAsync(postScript);

兼容性备选方案（使用XMLHttpRequest） #

如果需要兼容更旧的环境，可改用XMLHttpRequest：

using System.Text.Json;

var jsonPayload = JsonSerializer.Serialize(parameters.PostData.Payload);
var escapedJson = jsonPayload.Replace("'", "\\'");

var postScript = @$"
var xhr = new XMLHttpRequest();
xhr.open('POST', '{parameters.Url}', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {{
    if (xhr.status >= 200 && xhr.status < 300) {{
        // 处理重定向
        if (xhr.responseURL !== '{parameters.Url}') {{
            window.location.href = xhr.responseURL;
        }} else {{
            var responseData = JSON.parse(xhr.responseText);
            console.log('响应数据:', responseData);
        }}
    }} else {{
        console.error('请求失败，状态码:', xhr.status);
    }}
}};
xhr.onerror = function() {{
    console.error('网络请求异常');
}};
xhr.send('{escapedJson}');
";

await webView.ExecuteScriptAsync(postScript);

关键注意事项 #

• 字符转义：必须转义JSON字符串中的单引号，否则会破坏JS代码的字符串包裹结构，导致语法错误。
• 请求头设置：务必添加Content-Type: application/json，否则后端无法识别请求体格式。
• 重定向处理：fetch和XMLHttpRequest默认不会自动触发页面跳转，需要通过response.redirected（fetch）或responseURL（XHR）判断后手动跳转。

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