如何在Next.js App Router中使用相对路径调用fetch？

问题根源 #

你用相对路径请求时，浏览器会基于当前页面的URL拼接请求地址。比如前端跑在http://localhost:5173，fetch("/api/status")实际会请求http://localhost:5173/api/status，但后端在3000端口，自然找不到接口；而绝对路径直接指定了后端地址，所以能正常访问。

不用变量的解决办法 #

1. 开发环境配置代理（前端框架通用） #

通过前端开发服务器的代理功能，把/api开头的请求自动转发到后端地址，这样就能直接用相对路径：

• Create React App：在package.json中添加一行：

  "proxy": "http://localhost:3000"
  

  重启开发服务器后，fetch("/api/status")会自动转发到http://localhost:3000/api/status。

• Vite：在vite.config.js中配置代理：

  export default {
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          changeOrigin: true
        }
      }
    }
  }
  

• Vue CLI：在vue.config.js中配置：

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          changeOrigin: true
        }
      }
    }
  }
  

2. 生产环境设置<base>标签 #

如果前端和后端部署在同一域名下，在HTML的<head>里添加<base>标签，指定相对路径的基准URL：

<head>
  <base href="/">
</head>

这样所有相对路径请求都会基于域名根目录发送，比如fetch("/api/status")会请求https://your-domain.com/api/status，只要后端在该域名下配置了/api路由就能正常访问。

3. 后端调整路由或部署路径 #

如果前端和后端部署在同一服务器，可将后端的/api路由直接挂载到域名根目录下，确保前端相对路径请求能直接命中后端接口。

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