Node.js与Nuxt.js结合遇API 404错误：如何解决？

问题分析 #

当前配置存在路径重复挂载的问题：

• server.js中给express实例设置了path: '/api'，意味着Nuxt会把这个express服务挂载到/api路径下
• 但你又在express里定义了app.get('/api/data')，最终实际可访问的路径会变成/api/api/data，而你请求的是/api/data，因此返回404

解决方案 #

修改server.js中的路由定义，去掉重复的/api前缀：

// server.js
const express = require('express');
const app = express();

// 将/api/data改为/data
app.get('/data', (req, res) => {
  res.json({ message: 'Hello from server!' });
});

module.exports = {
  path: '/api',
  handler: app
};

验证 #

重启Nuxt服务后，再次发送GET请求http://localhost:3000/api/data，即可正常获取响应：

{ "message": "Hello from server!" }

可选方案（不推荐） #

如果想保留express里的完整路由结构，可移除server.js中的path配置：

修改server.js #

// server.js
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from server!' });
});

// 移除path配置，直接导出express实例
module.exports = app;

修改nuxt.config.ts #

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  serverMiddleware: [
    '~/server/server.js'
  ]
})

此方案虽能解决问题，但会让路由前缀分散在多个文件中，不利于后续维护，更推荐第一种方案。

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