NextJS 13.4跨页面调用API路径错误问题求助

问题原因 #

你在子路由页面（如/about）使用相对路径fetch('api/proxy')时，浏览器会将其解析为相对当前页面路径的请求，导致实际请求地址变成/about/api/proxy，而你的API路由实际部署在根路径/api/proxy，因此无法匹配。

解决方案 #

1. 直接使用根路径开头的绝对路径

这是最简便的解决方法，给API路径加上开头的斜杠，强制从域名根目录发起请求：

fetch('/api/proxy') // 注意前面的斜杠

无论当前在/home、/about还是/contact页面，这个请求都会指向http://localhost:3000/api/proxy，完全符合你的需求。

2. 用环境变量统一管理API基础路径（可选）

如果后续可能修改域名、添加basePath或调整API前缀，推荐用环境变量统一配置，避免多处改代码：

• 在项目根目录创建.env.local文件，添加：

  NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
  

• 调用API时使用环境变量拼接路径：

  fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/proxy`)
  

3. 服务器组件直接调用API处理函数（高效方案）

由于你使用的是Next.js 13.4的app目录，默认页面都是服务器组件，可以跳过网络请求，直接调用API路由的处理函数：

• 假设app/api/proxy/route.js的代码如下（以GET请求为例）：

  export async function GET() {
    // 你的代理逻辑
    return Response.json({ data: 'proxy response' });
  }
  

• 在app/about/page.js中直接导入并调用：

  import { GET as proxyGet } from '../api/proxy/route';
  
  async function AboutPage() {
    const res = await proxyGet();
    const data = await res.json();
  
    return <div>代理返回数据：{data.data}</div>;
  }
  
  export default AboutPage;
  

这种方式是服务器内部调用，没有客户端到服务器的网络开销，性能更优。

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