Next.js调用外部API时被自动拼接localhost:3000前缀问题求助

问题根因 #

你遇到的URL前自动拼接localhost:3000的核心原因是fetch识别到传入的请求地址不是合法的绝对路径，自动按相对路径处理，和WSL2没有直接关联，不需要卸载WSL2。

从你提供的代码来看，90%以上的概率是NEXT_PUBLIC_API_URL环境变量异常导致的，常见异常场景如下：

• 环境变量未正确加载，值为空，拼接后实际传入fetch的地址是/api/articles?xxx，自然会被拼接当前页面的域名
• 环境变量值没有带http:///https://协议前缀，比如仅配置了192.168.1.100:8000而非http://192.168.1.100:8000，不符合标准URL格式的地址会被fetch判定为相对路径
• 环境变量值前后存在不可见的特殊字符（比如换行、零宽空格），你排查了可见空格但这类字符无法直接识别
• 如果你的请求是在SSR/SSG/服务端组件等服务端逻辑中发起，还要确认服务端运行环境也配置了该环境变量，NEXT_PUBLIC_前缀的变量仅保证客户端可访问，服务端侧的环境变量需要单独配置

排查与修复步骤 #

1. 首先修改fetcher.js代码，打印完整的拼接后地址，确认实际传入fetch的地址是否符合预期：

export const fetcher = (path, options) => {
  const fullUrl = `${process.env.NEXT_PUBLIC_API_URL}${path}`
  // 用JSON.stringify包裹可以明确显示字符串前后的空白/特殊字符
  console.log('完整请求地址：', JSON.stringify(fullUrl))
  return fetch(fullUrl, options).then(res => res.json())
}

2. 检查你当前启动Next.js的环境的环境变量加载逻辑：如果你近期修改了启动脚本、新增/覆盖了.env类配置文件、切换了启动终端，很可能是环境变量没有被正确读取
3. 如果确认环境变量值存在，优先检查是否携带了http:///https://协议前缀，缺失的话补上即可解决问题

关联WSL2的排查（如果上述步骤都无效） #

你没有通过WSL终端启动应用的情况下，WSL2本身不会篡改请求逻辑，可按以下步骤排查：

• 清空浏览器缓存、禁用所有浏览器插件后重试，排除插件篡改请求的可能
• 停止Next.js服务后删除项目根目录下的.next缓存文件夹，再重启服务，排除构建缓存导致的异常
• 检查本地hosts文件是否有异常配置，是否将你的目标服务地址错误指向了本地

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