Next.js项目部署至Vercel后无法获取数据，请求localhost报错求助

核心问题定位 #

报错里的请求地址是http://localhost:3000/api/totalReserve，但你的项目已经部署到Vercel，前端代码仍在请求本地地址——这才是请求被客户端拦截的根本原因，和CORS配置无关。浏览器安全策略或隐私插件会阻止生产环境页面请求localhost地址。

具体修复步骤 #

1. 替换硬编码的API地址
   把前端代码里所有写死的http://localhost:3000/api替换成相对路径/api，或者用环境变量动态获取地址：

   • 相对路径示例：

     // 原代码
     fetch('http://localhost:3000/api/totalReserve')
     // 修改后
     fetch('/api/totalReserve')
     

   • 环境变量方式（推荐）：
     本地创建.env.local文件：

     NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
     

     到Vercel控制台添加生产环境变量NEXT_PUBLIC_API_BASE_URL，值为你的项目域名+/api（比如https://your-project.vercel.app/api），前端代码调用时用：

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

2. 移除冗余的CORS配置
   你的API和前端部署在同一个Vercel域名下，不需要跨域头配置，之前在next.config.mjs里的CORS规则可以删除，避免多余响应头引发潜在问题。

3. 验证API部署状态
   直接在浏览器访问https://your-project.vercel.app/api/totalReserve，确认API能正常返回数据，排除接口本身的部署故障。

4. 排查浏览器插件干扰
   若仍有报错，暂时禁用AdBlock、uBlock Origin等隐私类插件，这类工具可能会拦截不符合生产环境逻辑的请求。

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