NUXT3通用渲染中私有runtimeConfig的API_TOKEN客户端使用问题求助

问题根源：你定义的API_TOKEN属于非public的runtimeConfig变量，仅在Nuxt服务器端可访问。页面首次加载是服务端渲染（SSR），能正常获取到API_TOKEN；但客户端导航跳转时，代码在浏览器端执行，无法读取私有变量，导致请求头缺失X-API-KEY，返回403。

以下是两种可行的解决方法，优先推荐安全的代理方案：

方案一：通过Nuxt代理转发请求（安全首选） #

这种方式让客户端请求先发给Nuxt服务器，再由服务器携带API_TOKEN转发给目标API，彻底避免敏感密钥暴露给客户端。

步骤1：配置代理并安装依赖 #

先安装代理模块：

npm install @nuxtjs/proxy

修改nuxt.config.js：

export default defineNuxtConfig({
  modules: ['@nuxtjs/proxy'],
  runtimeConfig: {
    API_TOKEN: process.env.API_TOKEN,
    public: {
      BASE_URL: '/api', // 改为代理路径
    },
  },
  proxy: {
    '/api': {
      target: process.env.BASE_URL,
      changeOrigin: true,
      pathRewrite: { '^/api': '' }, // 若目标API不需要/api前缀，重写路径
    },
  },
})

步骤2：修改组合式函数 #

// ~/composables/useMyFetch.js
export const useMyFetch = (request, opts = {}) => {
  const config = useRuntimeConfig();
  
  // 仅在服务器端添加私有API_TOKEN，客户端直接请求代理路径
  const mergedHeaders = process.server 
    ? { 'X-API-KEY': config.API_TOKEN, ...opts.headers }
    : { ...opts.headers };

  return useFetch(`/api${request}`, {
    headers: mergedHeaders,
    ...opts,
  });
};

方案二：将API_TOKEN设为public（仅适用于非敏感密钥） #

如果你的API_TOKEN不涉及核心权限（不推荐此方案），可以把它移到public字段下，让客户端能直接访问：

修改nuxt.config.js：

runtimeConfig: {
  public: {
    BASE_URL: process.env.BASE_URL,
    API_TOKEN: process.env.API_TOKEN, // 移至public下
  },
},

更新组合式函数：

// ~/composables/useMyFetch.js
export const useMyFetch = (request, opts = {}) => {
  const config = useRuntimeConfig();

  return useFetch(request, {
    baseURL: config.public.BASE_URL,
    headers: {
      "X-API-KEY": config.public.API_TOKEN,
      ...opts.headers, // 允许自定义请求头覆盖默认值
    },
    ...opts,
  });
};

注意：此方案会将API_TOKEN暴露在浏览器请求头中，存在被恶意抓取的风险，仅适合非敏感场景。

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