Nuxt3 SSR模式下自有服务器API路由请求失败问题排查

错误原因分析 #

1. 后端参数获取错误：你的API文件是/server/api/blogs/[slug].get.ts，但代码里用event.context.params?.id获取参数，正确的参数名应该是slug而非id。这会导致后端无法拿到正确的slug值，直接抛出400错误，最终触发前端的fetch失败。
2. 生产环境baseUrl配置问题：如果NUXT_PUBLIC_BASE_URL在生产环境未正确配置，可能导致请求地址错误（比如空值或错误域名），引发跨域或请求地址无效。
3. MongoDB生产环境连接异常：生产环境中MongoDB的连接字符串、权限配置可能和本地不同，导致connectDB()失败，进而触发API内部错误。
4. 页面与API路径的潜在混淆：你提到的页面是/pages/blogs/:slug，但实际代码里是/pages/blog/[slug].vue，如果路由配置不一致，可能导致slug参数传递错误。

是否可以开发全栈Nuxt项目 #

完全可以。Nuxt 3原生支持全栈开发，/server目录用于编写后端API，/pages目录处理前端页面，两者可无缝协作，官方提供了完整的全栈开发工具链与文档。

修复方案 #

1. 修正后端参数获取逻辑 #

修改/server/api/blogs/[slug].get.ts中的参数获取代码：

// 原错误代码
const metaSlug = event.context.params?.id || null;
// 修改为正确代码
const metaSlug = event.context.params?.slug || null;

2. 简化前端API请求 #

Nuxt 3的$fetch默认会自动代理API请求到服务器，无需手动拼接baseUrl，直接简化请求代码：

<script setup>
const route = useRoute();
const slug = route.params.slug;

const {
  data: currentArticle,
  error,
  status,
} = await useAsyncData("blog", () =>
  $fetch(`/api/blogs/${slug}`) // 去掉baseUrl，Nuxt自动代理
);
</script>

此方式可避免baseUrl配置错误，同时在生产环境自动适配部署域名。

3. 检查生产环境环境变量 #

确保生产环境正确配置以下变量：

• NUXT_PUBLIC_BASE_URL（如需显式设置）：值应为生产域名，比如https://test.com
• MongoDB连接字符串：确认生产环境的数据库地址、用户名、密码配置正确，且服务器IP已加入MongoDB白名单

4. 完善后端日志与错误处理 #

在后端API中补充日志，方便生产环境排查问题：

await connectDB();
console.log("MongoDB连接成功（生产环境）");
console.log("接收的slug参数:", metaSlug);

其他解决方案 #

• 使用serverFetch：在组件中使用serverFetch方法，直接在服务器端获取数据，避免客户端请求API的跨域或网络问题。
• 配置Nuxt代理：若需跨域请求，可在nuxt.config.ts中配置代理自动转发API请求：

export default defineNuxtConfig({
  proxy: {
    '/api': {
      target: 'https://test.com',
      changeOrigin: true
    }
  }
});

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