ReactJS应用Axios POST数据无法被Golang服务器解析问题

核心问题 #

你的问题源于两个关键矛盾：

1. 请求内容类型与解析方式不匹配：前端设置了application/x-www-form-urlencoded的请求头，但发送的是JSON结构数据，后端却用json.NewDecoder解析请求体，两者完全不兼容。
2. 字段名称不对应：前端发送的字段是task，但Go结构体listItem期望接收的是title字段，导致数据无法映射。

两种可行解决方案 #

方案一：使用JSON格式传输（推荐，前后端API通用方式） #

前端代码修改

将请求头改为application/json，同时把发送的字段名改为title（匹配后端结构体）：

onSubmit = (event) => {
    event.preventDefault();
    let { task } = this.state;
    console.log("printing new task title:", task);
    if (task) {
        axios
        .post(
            endpoint + "/api/task",
            {title: task}, // 字段名对应后端的title
            {headers: {"Content-Type": "application/json"}} // 改为JSON类型
        )
        .then((res) => {
            this.getTasks();
            this.setState({task: ""});
            console.log(res);
        });
    }
};

后端代码修改

修正响应头拼写错误（Context-Type改为Content-Type），保留JSON解析逻辑并添加错误处理：

// CreateTask create task route
func CreateTask(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json") // 修正拼写错误
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    
    var newTask listItem
    // 不要忽略解析错误，便于排查问题
    if err := json.NewDecoder(r.Body).Decode(&newTask); err != nil {
        http.Error(w, err.Error(), http.StatusBadRequest)
        return
    }
    fmt.Println(newTask)
    insertOneTask(newTask)
    json.NewEncoder(w).Encode(newTask)
}

方案二：使用表单格式传输 #

如果坚持使用application/x-www-form-urlencoded，需要调整数据格式和后端解析方式：

前端代码修改

用URLSearchParams封装表单数据，字段名设为title：

onSubmit = (event) => {
    event.preventDefault();
    let { task } = this.state;
    console.log("printing new task title:", task);
    if (task) {
        const formData = new URLSearchParams();
        formData.append('title', task); // 对应后端结构体的title字段
        axios
        .post(
            endpoint + "/api/task",
            formData,
            {headers: {"Content-Type": "application/x-www-form-urlencoded"}}
        )
        .then((res) => {
            this.getTasks();
            this.setState({task: ""});
            console.log(res);
        });
    }
};

后端代码修改

改用表单解析方式获取数据：

// CreateTask create task route
func CreateTask(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    
    // 解析表单数据
    if err := r.ParseForm(); err != nil {
        http.Error(w, err.Error(), http.StatusBadRequest)
        return
    }
    
    newTask := listItem{
        Title:     r.FormValue("title"), // 获取表单中的title字段
        Completed: false,
    }
    fmt.Println(newTask)
    insertOneTask(newTask)
    json.NewEncoder(w).Encode(newTask)
}

额外注意事项 #

• 后端原代码中Context-Type是拼写错误，必须改为Content-Type才能生效。
• 永远不要忽略请求体的解析错误（原代码中_ = json.NewDecoder(...)），添加错误处理能快速定位问题。
• 确保前后端字段名称完全匹配：前端发送title，后端结构体通过json:"title,omitempty"映射，才能完成数据解析。

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