前台调用后台接口的时候会出现报错404

Question

前台调用后台接口的时候会出现报错404：
GET http://localhost:8080/端口路径?t=abcdefj(一串字符）这样的报错。前提是我前台的api写的端口路径和后台的保持了一致，都是GET，没有发现其他问题

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题分析： 可能产生404报错的原因有以下几种：

1. 端口路径错误：前台和后台的端口路径不一致，或者前台端口路径缺少参数导致找不到对应的接口。
2. 请求方法错误：前台请求的方法和后台定义的方法不一致，例如前台请求的是POST，但是后台只能接受GET请求。
3. 路径参数错误：前台传入的参数格式或者值不正确，导致找不到对应的接口。
4. 接口不存在：前台调用的接口在后台并不存在，或者后台服务未启动，或者端口被占用，导致前台找不到对应的接口。 解决方法：
5. 确认前台和后台的端口路径是否一致。
6. 确认前台请求的方法是否与后台定义的方法一致。
7. 确认前台传入的参数格式和值是否正确。
8. 确认后台服务是否启动，端口是否被占用，以及接口是否存在。 案例： 假设前台请求的接口为 GET http://localhost:8080/api/getUserInfo?id=123，但是报错404，页面显示为 GET http://localhost:8080/api/getUserInfo?id=abcdefj not found ，则可能的解决方法如下：
9. 确认前台路径是否拼写正确，是否包含端口号和路径参数，以及是否和后台的一致。
10. 确认前台请求的方法是否为GET，如果不是则需要修改为GET。
11. 确认前台传入的id参数是否正确，例如是否为数字类型或者是否为非空字符串类型。
12. 确认后台服务是否启动，查看后台启动日志以及端口是否已被占用。如果接口不存在，则需要检查后台代码是否正确，端口路径是否正确以及是否已经部署到服务器上。 代码演示（前台请求函数）：

function getUserInfo(id) {
  return axios.get('http://localhost:8080/api/getUserInfo', { params: { id } })
    .then(response => {
      console.log(response.data)
    })
    .catch(error => {
      console.log(error.message)
    })
}

以上代码是使用axios库发送GET请求的示例代码，其中将id作为参数传入请求中。如果出现404报错，则需要按照上述解决方法进行排查。