Next.js 中 getServerSideProps 场景下 rewrites 路由重写规则不生效问题

问题现象 #

已在 next.config.js 中配置通用接口重写规则：

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

该规则可正常匹配所有来自前端浏览器的接口请求，完成向本地5000端口后端服务的转发。
但在页面的 getServerSideProps 中调用全局复用的axios实例时，抛出连接错误：

Error: connect ECONNREFUSED 127.0.0.1:80

调试发现请求的实际地址被解析为 http:/api/cart，完全未命中已配置的重写规则。

根因说明 #

• Next.js 的 rewrites 配置属于入站路由拦截规则，仅作用于所有抵达 Next.js 服务端口的外部请求，在路由分发前完成路径改写和目标地址转发，不会拦截Next.js进程内部代码主动向外发出的网络请求。
• getServerSideProps 的代码直接运行在 Next.js 的 Node 服务进程内部，这段代码中发起的HTTP请求属于进程出站请求，完全不经过 Next.js 自身的路由匹配层，自然无法触发预先配置的重写规则。
• 出现80端口连接拒绝的本质原因：axios 在 Node 运行环境下没有浏览器自带的源地址（origin）上下文，配置的相对路径 baseURL: "/api" 会被默认解析为指向当前主机80端口的绝对地址，相当于直接尝试连接本地80端口的接口，既未经过重写规则转发，也因为对应端口无服务监听触发连接错误。

修复方案 #

• 服务端场景下直接使用绝对地址配置接口请求：
  不要在服务端代码中依赖相对路径+重写规则的逻辑，为服务端运行时的axios实例配置真实的后端服务绝对地址，可通过环境变量区分开发、生产环境配置，例如设置 baseURL: process.env.API_BASE_URL || "http://localhost:5000/api"。
• 复用全局axios实例时手动适配双端运行环境：
  可在axios请求拦截器中判断运行环境：如果是Node环境则自动拼接后端服务完整地址，如果是浏览器环境则保留相对路径走重写规则，实现一套实例两端复用，避免相对路径在Node环境下解析错误。
• 明确重写规则的适用边界：
  路由重写规则仅适用于前端浏览器发起的跨域/路径代理需求，不要在服务端运行的同进程代码中，将重写规则作为请求转发的依赖。

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