前端404后端200之谜：如何解决前端报404而数据库成功插入数据的问题

前端

2023-04-15 22:37:03

前端 404 后端 200：一种令人困惑的错误现象

什么是前端 404 后端 200 错误？

当我们发送 AJAX 请求时，通常期望后端返回一个 HTTP 状态码 200，表示请求成功。然而，有时事情会变得奇怪，前端会收到一个 404 错误，而实际上后端已经成功处理了请求。

原因剖析

这种困惑的根源可能是多方面的：

后端处理错误： 后端在处理请求时抛出错误，即使它成功到达了服务器。
协议不匹配： 前端和后端使用不同的协议，如 HTTP 和 HTTPS。
域名或端口不一致： 前端和后端使用不同的域名或端口。
路径差异： 前端和后端使用不同的 URL 路径。
路由错误配置： 后端的路由配置不正确，导致请求找不到正确的处理程序。

解决方法

第一步：检查后端代码

确保后端代码没有抛出错误，验证其是否正常工作。

第二步：检查协议、域名、端口和路径

确认前端和后端使用相同的协议。
确保它们使用相同的域名。
验证前端和后端的端口是否一致。
检查请求的路径是否正确。

第三步：检查后端的路由配置

查看后端的路由配置，确保请求被正确路由到相应的处理程序。
使用调试工具，如 Chrome DevTools 的网络选项卡，来检查请求和响应。

第四步：进一步排查

查看后端的日志文件，寻找任何错误消息。
使用抓包工具，如 Wireshark 或 Fiddler，来捕获请求和响应。

案例演示

以下是一个 PHP 后端和 JavaScript 前端代码示例，演示了如何处理请求并返回适当的 HTTP 状态码：

<?php
// 后端 PHP 代码

// 接收前端 AJAX 请求
$data = json_decode(file_get_contents('php://input'));

// 处理请求并保存数据到数据库
// 如果成功，返回 HTTP 状态码 200
if ($data) {
  // 执行数据库操作，保存数据
  header("HTTP/1.1 200 OK");
} else {
  // 如果处理失败，返回 HTTP 状态码 400
  header("HTTP/1.1 400 Bad Request");
}
?>

// 前端 JavaScript 代码

// 发送 AJAX 请求
fetch('api/save-data', {
  method: 'POST',
  body: JSON.stringify({ name: 'John', email: 'john@example.com' }),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => {
  // 处理后端响应
  if (res.status === 200) {
    // 请求成功，数据保存成功
    console.log('Data saved successfully!');
  } else {
    // 请求失败，处理错误
    console.error('An error occurred while saving data!');
  }
})
.catch(err => {
  // 处理网络错误
  console.error('An error occurred while sending the request!');
});