Axios/Fetch请求未生效next.config.js重写规则问题排查

核心问题 #

你的配置存在两个错误，和axios/fetch本身无关，也不需要额外安装next-http-proxy-middleware包，Next.js原生rewrites能力完全可以实现需求：

1. 路径匹配规则未加通配符，无法匹配/api下的多级子路径
2. 转发目标地址未配置路径透传，匹配到请求后不会把后续路径段带给后端服务

修复配置 #

修改next.config.js为如下内容：

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

配置说明：

• :path*是Next.js路径匹配语法，代表捕获/api后的任意多级路径内容
• destination 末尾的:path*会把捕获到的路径段自动拼接到目标地址后，比如请求/api/project/Name_of_Project会被自动转发到http://localhost:3001/api/project/Name_of_Project

注意事项 #

• 修改next.config.js后必须重启Next.js服务，该文件的改动不会触发热更新，不重启配置不会生效
• rewrites规则对浏览器地址栏直接访问、axios/fetch客户端发起的请求完全等效，不存在客户端请求不匹配规则的情况
• 你之前直接写死后端全路径http://localhost:3001/xxx的方案仅本地可用，生产部署会出现跨域、地址失效问题，不推荐使用

生产环境优化方案 #

如果后续需要部署到正式域名，可以通过环境变量区分环境，避免硬编码地址：

const isDev = process.env.NODE_ENV === 'development'
// 开发环境走本地rewrite代理，生产环境可由外层Nginx/网关统一处理/api路径转发
module.exports = {
  async rewrites() {
    if (!isDev) return []
    return [
      {
        source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
      },
    ]
  },
};

业务代码中全程使用/api/xxx相对路径即可，不需要写任何主机、端口信息，切换环境只需要修改对应的环境变量值。

内容的提问来源于stack exchange，提问作者James.Poppy