Nuxt3中API URL秘密变量泄露问题求助

你的问题出在runtimeConfig的配置位置错误：Nuxt3中，runtimeConfig.app下的变量会被暴露给客户端，所以你的API URL才会出现在网站源码里。

解决步骤： #

1. 调整nuxt.config.ts的配置结构
   将API URL移到runtimeConfig的根节点下（不要放在app或public里），根节点的变量仅服务端可访问，不会被传到前端：

   export default defineNuxtConfig({
     ssr: true,
     routeRules: {},
     modules: [],
     runtimeConfig: {
       // 仅服务端可见的秘密变量
       apiUrl: process.env.NUXT_API_HOST,
       public: {
         // 此处放需要客户端访问的公开变量（可选）
       }
     }
   })
   

2. 在服务端代码中安全使用变量
   通过服务端逻辑（比如Nuxt的Server API路由、服务器中间件）调用API，避免客户端直接接触真实的API地址。示例：
   在server/api/data.ts中创建转发路由：

   export default defineEventHandler(async (event) => {
     const config = useRuntimeConfig()
     // 服务端安全访问API URL
     const res = await fetch(`${config.apiUrl}/your-endpoint`)
     return await res.json()
   })
   

3. 客户端通过服务端路由间接调用API
   客户端代码只需要请求自己的服务端路由，无需知道真实API地址：

   const data = await useFetch('/api/data')
   

为什么原来的配置会泄露？ #

Nuxt3的runtimeConfig.app属于客户端可访问的配置域，会被打包到window.__NUXT__全局对象中，所以任何放在这里的变量都会出现在网站源码里。只有runtimeConfig根节点下的变量是服务端专用的，不会暴露给客户端。

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