Nuxt 2静态站点：跨路由获取受API限制的私有数据方案咨询

针对你在Nuxt 2静态站点中遇到的受限API调用问题，这里有几个可行的最佳实践：

1. 搭建本地代理接口（通用方案） #

因为目标API仅允许服务器端调用，你可以通过Nuxt的serverMiddleware创建一个代理接口，让客户端请求先转发到这个本地接口，再由它在服务器端发起对目标API的请求。这样无论初始加载还是应用内路由切换，都能正常获取数据。

步骤： #

• 在项目根目录创建server-middleware/proxy-reviews.js文件：

const axios = require('axios')

export default async (req, res) => {
  // 从请求参数中获取企业ID（根据你的业务调整）
  const { businessId } = req.query

  try {
    // 服务器端调用目标API
    const response = await axios.get('https://目标API地址/评论接口', {
      params: { businessId },
      // 携带目标API要求的认证信息（如API Key）
      headers: { 'Authorization': 'Bearer YOUR_API_KEY' }
    })
    res.json(response.data)
  } catch (error) {
    res.status(error.response?.status || 500).json({ error: '获取评论失败' })
  }
}

• 在nuxt.config.js中注册这个中间件：

export default {
  serverMiddleware: [
    { path: '/api/proxy-reviews', handler: '~/server-middleware/proxy-reviews.js' }
  ]
}

• 在页面的asyncData中调用本地代理接口（无需process.server判断）：

export default {
  async asyncData({ $axios, params }) {
    const reviews = await $axios.$get('/api/proxy-reviews', {
      params: { businessId: params.businessId } // 假设页面路由带企业ID参数
    })
    return { reviews }
  }
}

注意：如果你的静态站点部署在Vercel、Netlify等平台，需要对应配置平台的服务器函数（如Vercel的api目录、Netlify的netlify/functions），本质逻辑和serverMiddleware一致，都是在服务器端代理请求。

2. 预生成所有需要展示评论的页面（适合企业数量有限的场景） #

如果你的业务中需要展示评论的企业数量是固定且有限的，可以在静态构建阶段预生成所有对应页面，把评论数据直接嵌入静态HTML中。

步骤： #

• 在nuxt.config.js的generate配置中指定需要预生成的路由：

export default {
  generate: {
    async routes() {
      // 先获取所有需要展示评论的企业ID列表（可以从API或本地文件获取）
      const businesses = await axios.get('https://你的企业列表API')
      return businesses.data.map(business => `/business/${business.id}`)
    }
  }
}

• 页面的asyncData无需process.server判断，构建时Nuxt会在服务器端执行它并生成静态页面：

export default {
  async asyncData({ $axios, params }) {
    const reviews = await $axios.$get('https://目标API地址/评论接口', {
      params: { businessId: params.businessId },
      headers: { 'Authorization': 'Bearer YOUR_API_KEY' }
    })
    return { reviews }
  }
}

这样构建完成后，所有企业评论页面都是静态HTML，应用内路由切换时直接加载静态内容，不会出现数据缺失的问题。

为什么之前的方法会报错？ #

你之前用if (process.server)限制仅在服务器端获取数据，但静态生成模式下，应用内路由切换是在浏览器客户端执行的，此时process.server为false，asyncData中获取数据的代码不会执行，导致页面没有评论数据，进而引发报错。

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