Nuxt构建后API返回404问题求助

嘿，这种开发环境正常、生产环境掉链子的问题真的太闹心了！我之前也碰到过类似的情况，咱们一步步拆解排查：

最常见的原因：API路径配置不区分环境 #

开发时你可能用了本地API地址（比如http://localhost:3001/api），但构建Nuxt后，前端请求依然指向这个本地地址，而生产环境根本没有这个服务，自然返回404。

解决方案：用环境变量配置Axios基础路径 #

在nuxt.config.js里区分开发/生产环境的API地址：

export default {
  axios: {
    baseURL: process.env.NODE_ENV === 'production' 
      ? 'https://你的生产API域名/api' 
      : 'http://localhost:3001/api'
  },
  // 或者用Nuxt的公共运行时配置，支持构建后动态修改
  publicRuntimeConfig: {
    axios: {
      baseURL: process.env.API_BASE_URL || 'http://localhost:3001/api'
    }
  }
}

这样生产环境只要设置API_BASE_URL环境变量，就能自动指向正确的API地址。

第二可能：Nuxt接管了API路由（同端口部署场景） #

如果你的Koa API和Nuxt部署在同一个端口，Nuxt的路由优先级默认比自定义API高，导致所有/api开头的请求被Nuxt的404页面拦截。

解决方案：配置Server Middleware转发API请求 #

在nuxt.config.js里把API路径交给你的Koa服务处理：

export default {
  serverMiddleware: [
    // 把所有/api开头的请求转发到你的Koa API入口文件
    { path: '/api', handler: '~/server/index.js' }
  ]
}

确保你的Koa入口文件导出的是Koa实例，比如：

// ~/server/index.js
import Koa from 'koa'
import convert from 'koa-convert'
import cors from 'kcors'
import bodyParser from 'koa-body'
import session from 'koa-session'

const app = new Koa()
// 你的API路由配置...

export default app

第三可能：CORS配置不正确 #

开发环境你可能用了*允许所有跨域，但生产环境CORS限制了域名，导致请求被浏览器拦截（看起来像404，但实际是跨域错误，要去控制台看Network的请求状态）。

解决方案：生产环境配置正确的CORS来源 #

在你的Koa服务里修改kcors配置：

app.use(cors({
  origin: process.env.NODE_ENV === 'production' 
    ? 'https://你的Nuxt生产域名' 
    : '*',
  credentials: true // 如果需要带Cookie的话
}))

快速排查步骤 #

• 打开浏览器控制台的Network面板，查看生产环境下API请求的实际URL，确认是不是指向了错误的地址
• 检查nuxt.config.js里的Axios/baseURL配置，有没有区分开发和生产
• 如果是同端口部署，检查Server Middleware是否正确配置
• 查看浏览器控制台的Console标签，有没有跨域相关的错误

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