NextJS 13中rewrites无法在getServerSideProps中代理API请求

算力阿峰

2026-7-30

解决Next.js 13 getServerSideProps中rewrites代理不生效的问题

问题原因

Next.js的rewrites配置只负责处理外部客户端请求（比如浏览器发起的/api/*请求）和内部路由跳转，而getServerSideProps运行在Node.js服务端环境，这里发起的HTTP请求属于服务端内部调用，不会经过rewrites的路由代理规则。

当你在服务端用相对路径/api/get_page_data时，Axios会默认把请求发向当前Next.js服务器的地址（比如http://localhost:3000/api/get_page_data），而非你配置的代理目标地址，自然返回404错误。

解决方案

方案1：用环境变量区分客户端/服务端请求地址（推荐）

在项目根目录创建.env.local文件，配置API地址：

# 客户端用的地址（走rewrites代理）
NEXT_PUBLIC_API_CLIENT_BASE=/api
# 服务端直接请求的目标API地址
API_SERVER_BASE=http://test.example.com/api

封装Axios实例，自动切换baseURL：

import axios from 'axios';

// 判断当前是否为服务端环境
const isServer = typeof window === 'undefined';

// 创建Axios实例，根据环境自动切换baseURL
const apiClient = axios.create({
  baseURL: isServer ? process.env.API_SERVER_BASE : process.env.NEXT_PUBLIC_API_CLIENT_BASE,
});

export async function getData() {
  // 直接使用相对路径，Axios会自动拼接对应baseURL
  const res = await apiClient.get('/get_page_data');
  return res.data;
}

这样客户端请求会走/api触发rewrites代理，服务端则直接请求目标API地址，两边都能正常工作。

方案2：手动在请求中区分地址

如果不想用环境变量，也可以直接在getData函数里判断环境切换URL：

import axios from 'axios';

export async function getData() {
  const requestUrl = typeof window === 'undefined'
    ? 'http://test.example.com/api/get_page_data'
    : '/api/get_page_data';

  const res = await axios.get(requestUrl);
  return res.data;
}