如何使用Nuxt.js Server Middleware发起外部GET请求

你现在的问题出在两个关键错误上：

• Express路由配置完全错误：你写的第三方API地址不是当前中间件需要监听的路径。当请求http://localhost:3000/api/server-middleware时，这个请求会转发到getData.js的Express应用，你需要监听的是相对路径（比如/，因为nuxt.config.js里已经指定了根路径为/api/server-middleware），而非第三方API的URL。
• 没有实际发起外部API请求：你直接试图返回res.data，但res是响应对象，根本不存在data属性，这会导致逻辑错误。

下面是修正后的完整方案：

1. 先安装请求依赖（以axios为例，在项目根目录执行）：

npm install axios

2. 修改~/api/getData.js：

const bodyParser = require('body-parser');
const app = require('express')();
const axios = require('axios');

app.use(bodyParser.json());

// 监听当前server middleware路径的所有请求（对应http://localhost:3000/api/server-middleware）
app.all('/', async (req, res) => {
  try {
    // 发起GET请求到第三方API
    const apiResponse = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    // 将第三方API的数据返回给前端
    res.json({ data: apiResponse.data });
  } catch (error) {
    // 捕获并返回错误信息
    res.status(error.response?.status || 500).json({ error: error.message });
  }
});

module.exports = app;

3. nuxt.config.js的配置无需修改，保持原样即可：

serverMiddleware: [
  {
    path: '/api/server-middleware',
    handler: '~/api/getData.js',
  },
],

重启Nuxt项目后，用Postman请求http://localhost:3000/api/server-middleware就能正常获取第三方API的数据了。

另外纠正你的误解：Server Middleware完全支持调用外部API，它的作用是在Nuxt服务器层面处理请求，你可以用它做接口代理、数据聚合、权限校验等工作，并非只能处理内部逻辑。

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