React中DELETE请求返回404及JSON解析失败问题求助

1. 排查404 Not Found错误 #

你的请求URL https://localhost:7211/delete-post-by-id/12 返回404，但数据库存在对应ID，优先检查以下几点：

• 后端路由匹配问题：确认后端DELETE接口的路由是否严格对应 /delete-post-by-id/:postId，排查拼写错误（比如少写by）、大小写差异（比如后端路由是Delete-Post-By-Id）。
• 参数接收逻辑：检查后端是否正确识别URL中的postId参数，比如是否后端期望参数名为id而非postId，导致无法匹配到目标记录。
• 服务运行状态：确认后端服务确实在7211端口运行，且无跨域配置拦截DELETE请求（跨域通常返回CORS错误，但仍需排查）。

2. 修复JSON解析错误（SyntaxError: Unexpected end of JSON input） #

该错误是因为404响应的内容并非有效JSON（通常是HTML错误页），但你仍调用了response.json()导致解析失败。修改deleteUser函数，先校验响应状态：

function deleteUser(postId){
  const url  = `${Constants.API_URL_DELETE_POST_BY_ID}/${postId}`
  fetch(url, {
    method: 'DELETE'
  })
  .then(response => {
    // 先判断请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status} ${response.statusText}`);
    }
    // 若后端删除成功无返回内容，可跳过解析或用text()兜底
    return response.json().catch(() => null);
  })
  .then(responseFromServer =>{
    console.log(responseFromServer);
    onUserDeleted(postId);
  })
  .catch((error) => {
    console.log(error);
    alert(`删除失败: ${error.message}`);
  })
}

3. 修正前端状态更新逻辑 #

当前onUserDeleted会在API请求后直接删除前端数据，不管请求是否成功，易导致前后端数据不一致。调整为仅在API成功时更新状态：

function onUserDeleted(deletedUserPostId){
  let usersCopy = [...users];
  const index = usersCopy.findIndex(user => user.postId === deletedUserPostId);
  if(index !== -1){
    usersCopy.splice(index, 1);
    setUsers(usersCopy);
    alert('用户删除成功');
  }
}

4. 额外排查步骤 #

• 打开浏览器开发者工具的Network标签，查看DELETE请求的详细信息：确认Request URL、Request Headers是否符合后端要求，查看Response Body的具体内容（可能包含后端的错误提示）。
• 用Postman或curl直接调用后端DELETE接口 https://localhost:7211/delete-post-by-id/12，验证接口是否真的能成功删除并返回正确响应，彻底排除后端问题。

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