PostAsync忽略Content-Type，如何使其正确发送JSON内容？

问题描述 #

在ASP.NET WebForms页面中，当TextBox的OnTextChanged触发Post_Click后台事件后，使用HttpClient.PostAsync尝试发送JSON格式数据到API时，触发了内部服务器错误。检查发现请求的Content-Type为application/x-www-form-urlencoded，内容包含ASP.NET视图状态等表单数据，而非预期的序列化JSON对象。

解决方案 #

方案1：修正后台HttpClient请求（确保发送JSON） #

如果确认是后台HttpClient的请求配置问题，可按以下步骤调整：

• 替换ByteArrayContent为更简洁的StringContent，明确指定JSON内容类型：

protected async void Post_Click(object sender, EventArgs e)
{
    string url = Settings.Default.ApiAddress + "/api/login";
    BadgeInputDataDto dto = GetLoginDto();
    string jsonPayload = JsonConvert.SerializeObject(dto);
    
    // 使用StringContent直接构造JSON请求体，自动设置编码和Content-Type
    var requestContent = new StringContent(jsonPayload, Encoding.UTF8, "application/json");
    
    HttpResponseMessage response = await client.PostAsync(url, requestContent);
    response_value = response.IsSuccessStatusCode;
    
    if (response_value)
    {
        OperationSuccessful(await response.Content.ReadAsStringAsync());
    }
    else
    {
        OperationFailed(await response.Content.ReadAsStringAsync());
    }
}

• 检查HttpClient实例的初始化代码，确保没有全局设置默认的表单编码请求头，避免覆盖自定义的Content-Type：

  错误示例：client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/x-www-form-urlencoded"));
  若存在此类代码，需移除或调整为接受JSON格式。

方案2：避免页面回发，前端直接发送JSON（更优解） #

你看到的表单数据请求实际是WebForms页面回发的请求，而非HttpClient发起的API请求。若不需要页面回发，可直接在前端发送API请求：

1. 移除TextBox的OnTextChanged="Post_Click"属性，阻止自动回发：

<asp:TextBox ID="BarcodeInput" runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" style="width:100%; height: 100%;" />

2. 添加前端JavaScript监听输入事件，直接发送JSON请求：

document.getElementById('<%= BarcodeInput.ClientID %>').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault(); // 阻止默认表单提交行为
        var barcodeValue = this.value;
        
        // 构造与BadgeInputDataDto对应的JSON数据
        var requestData = {
            // 填充DTO字段，例如：Barcode: barcodeValue
        };
        
        fetch('<%= Settings.Default.ApiAddress %>/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
        .then(apiResponse => {
            if (apiResponse.ok) {
                return apiResponse.text();
            }
            throw new Error('API请求失败');
        })
        .then(result => {
            document.getElementById('<%= LabelResult.ClientID %>').textContent = '操作成功：' + result;
            document.getElementById('<%= LabelResult.ClientID %>').style.display = 'block';
            setTimeout(HideLabel, 5000);
        })
        .catch(error => {
            document.getElementById('<%= LabelResult.ClientID %>').textContent = '操作失败：' + error.message;
            document.getElementById('<%= LabelResult.ClientID %>').style.display = 'block';
            setTimeout(HideLabel, 5000);
        });
    }
});

3. 此方案跳过页面回发，直接由前端发送纯JSON请求，彻底避免视图状态等表单数据的干扰。

关键提示 #

你抓包看到的application/x-www-form-urlencoded请求是WebForms的页面回发请求，并非后台HttpClient发起的API请求。若要验证HttpClient的请求内容，需在API服务器端查看日志或抓包，或在后台代码中调试检查请求体内容。

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