必须通过后端代理调用纳米AI API，因前端明文存储API Key会导致密钥泄露、配额盗用及账户绑定风险；正确路径为前端→自有后端→纳米AI，Vue/React需配置代理，沙箱仅限调试。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在前端项目中安全调用纳米AI的API服务，必须避开浏览器端直接暴露密钥的风险，需通过代理层或后端中转完成认证，否则密钥将被任意用户抓包窃取。
为什么不能把API Key写在前端代码里
浏览器开发者工具可直接查看Network请求头中的Authorization字段，一旦密钥明文出现在JS文件或fetch调用中，【任何人打开网页源码就能复制密钥并盗用你的配额甚至绑定支付账户】。这是不可逆的安全事故，平台会立即冻结该密钥并追溯调用来源。
正确接入路径：前端→自有后端代理→纳米AI服务
第一步：在你自己的Node.js/Python/Java服务中新增一个路由，例如/api/nano/search；
第二步：该路由接收前端POST请求，提取其中的query、limit等参数；
第三步：后端拼装标准HTTP POST请求，Headers中加入Authorization: Bearer YOUR_SAVED_API_KEY；
第四步：将纳米AI返回的JSON原样透传给前端，不解析不修改。
Vue项目中调用代理接口的写法
使用axios发起请求时，URL必须指向你自己的后端地址，不是纳米AI的https://api.nano-ai.com：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
axios.post('/api/nano/search', { query: '钙钛矿电池效率提升路径', limit: 5 })
→ 成功后data.results数组即为搜索结果列表，可直接v-for渲染。
React中避免密钥泄露的关键配置
方法一：利用Create React App的proxy机制
在package.json中添加"proxy": "http://localhost:3001"（指向你的后端端口）；
组件内直接fetch('/api/nano/chat', { method: 'POST', body: JSON.stringify(...) })；
【注意：此proxy仅在开发环境生效，生产构建后失效，上线必须改用真实域名代理】。
方法二：Vite项目配置vite.config.ts
export default defineConfig({ server: { proxy: { '/api/nano': { target: 'http://your-server.com', changeOrigin: true } } } });
前端调试时临时绕过密钥校验的替代方案
步骤一：访问https://developer.n.cn/ → 进入「沙箱环境」→ 开启「Mock响应开关」；
步骤二：复制沙箱提供的临时Endpoint（形如https://mock.nano-ai.com/v1/search）；
步骤三：在前端代码中替换URL，仅用于UI联调，【上线前必须切换回真实代理地址】。
