纳米AI API Key接入前端项目教程-人工智能-PHP中文网

必须通过后端代理调用纳米ai api，因前端明文存储api key会导致密钥泄露、配额盗用及账户绑定风险；正确路径为前端→自有后端→纳米ai，vue/react需配置代理，沙箱仅限调试。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

纳米ai api key接入前端项目教程

要在前端项目中安全调用纳米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图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

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联调，【上线前必须切换回真实代理地址】。