NextJS中API调用路径自动拼接页面路由前缀异常如何解决

• 第一步：确认API路由文件存放位置
  Next.js Pages Router的所有API接口必须放在pages/api/根目录下才能被识别为根路径的API路由，检查你项目中是否存在pages/api/updateStaffDetails.js文件，不要将api文件夹放置在pages/Support/子目录下，否则会自动嵌套路由前缀。
• 第二步：全局配置axios baseURL（推荐）
  在项目入口（如_app.js或单独的axios配置文件）添加全局配置，固定请求根路径，彻底避免相对路径拼接问题：

  import axios from 'axios'
  // 生产环境可将根地址配置在环境变量NEXT_PUBLIC_SITE_URL中
  axios.defaults.baseURL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
  

  配置完成后直接使用根路径发起请求即可正常访问到期望接口：

  await axios.post('/api/updateStaffDetails', { data: dataToSubmit });
  

• 第三步：兜底重写规则
  如果无法调整文件夹结构，可在next.config.js中添加重写规则，强制将带support前缀的API请求转发到根API路径下：

  module.exports = {
    async rewrites() {
      return [
        {
          source: '/support/api/:path*',
          destination: '/api/:path*',
        },
      ]
    },
  }
  

注意：检查你代码中接口名是否存在笔误，你代码中请求的是updateStaffDetails，但实际抓包显示请求的是updateUser，排除拼写错误导致的路径异常。

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