如何为多API场景配置Axios与Nuxt runtime config？

1. 环境变量安全配置规则 #

• 所有敏感信息（比如TMDB的私有API密钥）必须放入privateRuntimeConfig，该配置仅在服务端运行时可访问，绝对不会注入到客户端代码中，不存在泄露风险。
• 可公开的非敏感配置（比如客户端侧Axios的基础请求路径）放入publicRuntimeConfig，该配置会同步到客户端侧使用。
• 不要在任何前端页面、组件代码中硬编码私有密钥，也不要将私有密钥写入publicRuntimeConfig。

2. 公开API请求方案 #

必须通过自有serverMiddleware作为代理转发公开API请求，禁止客户端（包括SSR阶段的客户端侧执行逻辑）直接携带密钥请求公开API，原因如下：

• asyncData、fetch方法在首次页面SSR时是服务端执行，但用户触发客户端路由跳转时，这两个方法会在浏览器端执行，此时如果直接请求公开API并携带密钥，会直接在浏览器的请求日志中泄露密钥。
• 代理转发逻辑全部在服务端执行，密钥仅在服务层拼接，客户端全程接触不到密钥，从根源避免泄露风险。

3. RuntimeConfig 与 Axios 参数协同逻辑 #

四个参数的职责和配合规则如下：

• axios.baseURL：仅在服务端发起请求时生效，对应服务端内部访问自有后端的地址，配置在privateRuntimeConfig中即可。
• axios.browserBaseURL：仅在客户端发起请求时生效，一般配置为/api对应serverMiddleware的挂载路径，放在publicRuntimeConfig中同步给客户端。
• 所有客户端发起的请求（包括自有认证接口、公开API转发请求）统一请求/api前缀的路径，由serverMiddleware分别处理：自有接口直接走JWT校验逻辑，公开API请求由服务端拼接密钥后转发到TMDB等第三方接口，再将结果返回给客户端。

示例配置 #

nuxt.config.js 配置示例：

export default {
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: '/api'
    }
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: 'http://localhost:3000/api'
    },
    tmdbApiKey: process.env.NUXT_TMDB_API_KEY // 该配置仅服务端可访问
  },
  modules: ['@nuxtjs/axios'],
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/index.js' }
  ]
}

server-middleware/index.js 转发示例：

import axios from 'axios'

export default function (req, res, next) {
  // 处理第三方公开API转发请求
  if (req.path.startsWith('/tmdb')) {
    const tmdbKey = process.env.NUXT_TMDB_API_KEY
    axios.get(`https://api.themoviedb.org/3${req.path.replace('/tmdb', '')}`, {
      params: { ...req.query, api_key: tmdbKey }
    }).then(resp => res.end(JSON.stringify(resp.data)))
      .catch(err => {
        res.statusCode = err.response?.status || 500
        res.end(JSON.stringify(err.response?.data || { error: 'request failed' }))
      })
    return
  }
  // 自有接口逻辑，走JWT校验等处理
  next()
}

客户端请求示例（组件中可直接调用，无需处理密钥）：

async asyncData ({ $axios }) {
  // 自动走代理转发，不会暴露TMDB密钥
  const movieData = await $axios.get('/tmdb/movie/123')
  return { movieData }
}

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