Nuxt客户端使用私有API密钥 路由跳转时密钥undefined问题求助

问题根因 #

该问题是Nuxt运行时配置的固有特性导致的：

• 定义在privateRuntimeConfig下的变量仅在服务端环境可用，永远不会暴露到客户端侧
• 首次加载、刷新页面时，asyncData钩子在服务端执行，可正常读取私有配置
• 路由跳转属于客户端侧导航，此时asyncData会在浏览器环境执行，无法读取privateRuntimeConfig下的变量，拿到的secretKey为undefined，传入Buffer.from后就会触发类型报错。

解决方案（基于serverMiddleware实现，无需额外后端） #

该方案完全依托Nuxt自带能力实现，私有密钥全程在服务端处理不会暴露到客户端，同时保留完整SSR能力：

步骤1：安装依赖（如未安装） #

执行命令安装dotenv用于读取.env配置：
npm i dotenv

步骤2：创建服务端中间件 #

在项目根目录新建server-middleware/get-products.js文件，代码如下：

require('dotenv').config()

export default async function (req, res) {
  // 密钥仅在服务侧处理，不会暴露到前端
  const secret = Buffer.from(process.env.MY_SECRET_KEY).toString('base64')
  const snipcartRes = await fetch('https://app.snipcart.com/api/products', {
    headers: {
      'Authorization': `Basic ${secret}`,
      'Accept': 'application/json'
    }
  })
  const products = await snipcartRes.json()

  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify(products))
}

步骤3：注册中间件到Nuxt配置 #

修改nuxt.config.js，新增中间件注册配置：

export default {
  // 其余原有配置保持不变
  serverMiddleware: [
    { path: '/api/get-products', handler: '~/server-middleware/get-products.js' }
  ]
}

步骤4：修改页面asyncData逻辑 #

调整原有asyncData代码，改为请求本地代理接口，无需再处理密钥逻辑：

async asyncData({ store }) {
  const res = await fetch('/api/get-products')
  const result = await res.json()
  store.commit('products/addProducts', result)
  const stocks = store.getters['products/getProducts']
  return { stocks }
}

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