React中Axios发送form-data格式POST请求返回406状态码如何解决

问题根因 #

406状态码的含义是服务端无法生成符合请求头Accept字段要求的响应内容，你的问题核心有两点：

• 请求头Accept配置错误：后端接口produces指定了返回application/json格式，但你前端把Accept设为了multipart/form-data，和后端返回类型不匹配直接触发406错误
• FormData字段名格式错误：formData.append时字段名后多写了冒号和空格（比如"firstName: "），和后端CustomerDto的字段名不匹配，即使过了406校验也会导致参数绑定失败

前端代码修正点 #

async function send(customer: CustomerPayloadModel) {
    console.log(customer);
    try{
        const formData = new FormData();
        // 修正1：去掉键名后的冒号和空格，和后端Dto字段名完全一致
        formData.append("firstName",customer.firstName);
        formData.append("lastName",customer.lastName);
        formData.append("email", customer.email);
        formData.append("password",customer.password);

       const headers = {
            // 修正2：Accept改为和后端produces匹配的application/json，直接删除这个头用默认值也可以
            'Accept': 'application/json', 
            "authorization": store.getState().authState.user.token
            }
        // 注意：axios发送FormData不需要手动设置Content-Type，浏览器会自动补全带boundary的正确头信息
        const response = await axios.post(globals.adminUrls.addCustomer , formData, {headers});
        // 其余原有逻辑保持不变

可选校验项 #

如果修正后仍有异常，可以再核对两处配置：

• 确认CustomerDto的字段名、类型和你前端传递的参数完全匹配
• 确认请求地址的后缀和后端路由一致，比如后端路由是addCustomer还是addCustomer/，路径不一致可能触发路由匹配错误

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