二次POST请求报JSON解析错误、重复ID500错误如何解决

三个报错是连锁触发的，核心问题就是重复ID提交：

• 根因是后端/wishlist接口对id字段加了唯一约束，同一条场馆数据已经被插入过的情况下，再次发起POST插入请求会触发唯一键冲突，直接抛出Error: Insert failed, duplicate id错误，返回500状态码
• 此时后端返回的响应是纯文本格式的错误信息，不是合法JSON，响应内容首字母是E（Error的首字母）
• 前端代码没有判断HTTP响应状态，拿到500的响应后直接调用resp.json()尝试解析，就会触发Unexpected token E in JSON at position 0的解析错误

前端侧修改 #

1. 提交前增加本地重复校验，提前拦截重复提交请求，从源头避免无效调用
2. 补全fetch的响应状态判断和错误捕获逻辑，不要默认所有响应都是合法JSON格式

修复后的完整代码：

const postStadiumToWishList = (stadium) => {
    // 提前校验本地是否已存在同ID数据
    const hasDuplicate = stadiums.some(item => item.id === stadium.id);
    if (hasDuplicate) {
        // 可替换为业务需要的提示逻辑，比如toast弹窗
        console.warn('该场馆已在收藏列表中，无需重复添加');
        return;
    }

    fetch(baseUrl + '/wishlist' , {
        method: "POST", 
        headers: {
            'Accept': 'application/json', 
            'Content-Type': 'application/json' 
        },
        body: JSON.stringify(stadium)
    })
    .then(resp => {
        // 先校验HTTP状态，非2xx响应统一走错误处理
        if (!resp.ok) {
            return resp.text().then(errMsg => Promise.reject(new Error(errMsg)));
        }
        return resp.json();
    })
    .then(data => {
        stadiums.push(data)
    })
    .catch(err => {
        // 统一处理请求、解析、业务错误
        console.error('收藏操作失败：', err.message);
    })
}

后端侧优化（可选） #

为了接口鲁棒性，建议调整接口逻辑：

• 遇到重复ID提交时，不要抛出500错误，返回409 Conflict状态码和明确的"资源已存在"结构化错误信息
• 或者将接口做幂等处理，重复提交时直接返回已存在的对应数据，不执行插入操作，保证重复调用不会报错

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