为何带请求拦截器的Axios Delete请求无法触发后端路由？

问题描述 #

发起简单的Delete请求，但后端对应的路由始终未被访问到，需要排查问题原因。

前端代码 #

BaseAPI封装 #

const instance = axios.create({
    baseURL: 'http://13axxxxx.ngrok.io'
});

instance.interceptors.request.use(
    async (config) => {
        const token = await AsyncStorage.getItem("token");
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    (err) => {
        return Promise.reject(err);
    }
);

export default instance;

Delete请求调用 #

import BaseAPI from './BaseAPI';
const deleteAccount = () => {
  return BaseAPI.delete('/delete_account');
}

注：原代码中delete是JavaScript关键字，不能用作函数名，会触发语法错误，这里改为deleteAccount避免问题

后端路由代码 #

app.use(router.delete('delete_account', (req, res, next) => {
        console.log("delete called")
    }))

排查要点 #

• 后端路由写法错误：

  1. 路由路径缺少开头的斜杠，必须改为'/delete_account'才能匹配前端的请求路径；
  2. app.use的用法有误，正确流程是先在router上定义路由，再将router挂载到app：

     router.delete('/delete_account', (req, res, next) => {
         console.log("delete called")
     });
     app.use('/', router); // 可根据需求添加前缀，比如`app.use('/api', router)`
     

  直接把router.delete()的结果传给app.use会导致路由规则无法正确注册。

• 前端请求语法问题：
  delete是JavaScript的关键字，不能用作函数名，这会直接导致代码报错，请求根本无法发起，必须修改函数名。

• 请求未正常发送：
  打开浏览器开发者工具的Network面板，查看Delete请求状态：

  • 无请求记录：检查是否正确调用了请求函数，以及拦截器是否抛出未捕获的错误；
  • 有请求记录：查看状态码（404表示路径不匹配，401/403表示权限验证失败，500表示后端内部错误）。

• 跨域问题：
  检查浏览器控制台是否有跨域报错，若有则需要在后端配置CORS（比如使用cors中间件）。

• 拦截器异常：
  在请求拦截器中添加日志，确认AsyncStorage.getItem("token")是否抛出错误，导致请求被终止：

  async (config) => {
      try {
          const token = await AsyncStorage.getItem("token");
          console.log("获取到的token:", token);
          if (token) {
              config.headers.Authorization = `Bearer ${token}`;
          }
          return config;
      } catch (err) {
          console.error("拦截器获取token失败:", err);
          return Promise.reject(err);
      }
  }
  

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