Vue中Axios发送POST请求出现404且网络面板无记录如何解决

问题排查与解决步骤 #

1. 优先排查请求未发出的根因 #

浏览器网络面板无请求记录，说明请求在客户端侧就被中断，没有实际发送到服务端，优先检查以下配置：

• 检查全局axios拦截器逻辑：是否有请求拦截器设置了权限校验（比如必须携带token才放行请求），如果拦截器中未执行return config就直接中断，请求不会发送
• 修正catch块的错误打印逻辑：你当前的catch仅解构了response字段，请求未发出时错误对象不存在response，会导致二次报错无法捕获真实原因，修改为打印完整错误：

.catch((err) => {
  console.log('完整错误：', err);
  // 分场景判断错误类型
  if (err.response) {
    console.log('服务端返回错误：', err.response);
  } else if (err.request) {
    console.log('请求已发出未收到响应：', err.request);
  } else {
    console.log('请求配置错误未发出：', err.message);
  }
})

2. 修正请求路径配置 #

你当前使用相对路径api/authentication/login发送请求，没有拼接基础域名前缀，很容易出现路径拼接错误：

• 先确认axios实例是否配置了baseURL，如果未配置，相对路径会自动拼接在当前页面的URL后，极易出现路径不匹配导致404
• 建议要么在axios全局配置中添加baseURL为接口服务的根地址，要么调用post方法时传入完整的接口路径，避免相对路径拼接异常

3. 简化冗余Promise封装 #

你外层额外包裹的Promise属于冗余逻辑，axios本身返回Promise对象，多余的封装可能导致异常无法正常抛出，简化代码测试：

loginMethod() {
  const config = {
    userName: "test@gmail.com",
    password: "1234test",
  };
  return ApiService.post("api/authentication/login", config)
    .then(({ data }) => {
      console.log(data);
      return data;
    })
    .catch((err) => {
      console.log(err);
    });
},

4. 核对接口参数匹配规则 #

确认后端接口的要求：

• 请求方法是否为POST
• 路径拼写是否完全匹配，有无多/少斜杠、单词拼写错误
• 请求头、参数格式是否符合后端要求，比如是否需要设置Content-Type为application/json

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