1. Vue3 TypeScript Pinia Vite 项目初始化后前端调用 AI 接口为什么本地代理失败你按课程 2.3 的步骤走完npm create vuelatest勾了 TypeScript、Router、Pinia、Prettiernpm install装完依赖npm run dev打开http://localhost:5173看到欢迎页一切正常。然后你想在页面里加一个「AI 对话」小功能前端直接fetch一个模型接口结果浏览器控制台甩给你一串红字net::ERR_FAILED、CORS policy、或者401 Unauthorized。这就是本节要解决的场景——Vue3 TypeScript Pinia Vite 项目初始化后前端调用 AI 接口时本地代理失败、401 报错的排查。先说清楚为什么会失败。浏览器出于安全策略默认禁止跨域请求也就是你的页面跑在localhost:5173而模型接口在另一个域名浏览器会先发一个OPTIONS预检请求对方没返回正确的Access-Control-Allow-Origin头请求就被拦下。很多人第一反应是把接口地址直接写进前端代码这有两个问题一是跨域二是你的 API Key 会明文暴露在浏览器里任何人打开 F12 都能看到。正确做法是让 Vite 的开发服务器做一层代理前端请求/api开头的路径Vite 转发到真正的接口地址浏览器看到的是同源请求跨域问题消失Key 也留在服务端配置里。那为什么还会 401401 是「未授权」通常有三种原因Key 没传、Key 传错、或者请求头格式不对。比如你把 Key 写成了Authorization: sk-xxx但接口要求的是Authorization: Bearer sk-xxx少了Bearer前缀就会 401。还有一种情况是代理配置里rewrite把路径改错了请求打到了不存在的端点服务端返回 401 而不是 404容易误导排查方向。这一节的目标很明确把 Vue3 TypeScript Pinia Vite 项目的 AI 接口调用链路打通用 TaoToken 统一 Key 管理给出可复制的.env和vite.config.ts代理配置再用curl验证请求成功最后把常见报错对照表列出来。适合刚搭完环境、准备做首次联调的开发者也适合被 401 和代理失败卡住、想快速定位问题的同学。我试过在三个不同项目里重复这套配置踩过的坑主要集中在环境变量前缀和代理 rewrite 上下面一步步来。2. TaoToken 前置准备统一 Key 与 Base URL 的获取在动手改配置之前先把「钥匙」拿到手。TaoToken 的作用是给你一个统一的 API 入口和 Key前端项目不用关心背后接的是哪个模型只认一个 Base URL 和一个 Key切换模型时改 Model ID 就行。这对 Vue3 项目特别友好因为你的 Pinia store 里只需要维护一份配置。第一步打开官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册并登录。登录后进入控制台地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite在左侧菜单找到「API Keys」点「创建新的 Key」。创建时给它起个名字比如vue-demo-dev方便区分不同项目。创建完成后Key 只会完整显示一次复制下来存到安全的地方后面配置.env要用。第二步确认 Base URL。TaoToken 的 API 入口是https://taotoken.net/api注意这个地址不带任何查询参数是纯净的接口根路径。你在前端配置里填的就是它。如果你用的是 OpenAI 兼容的 SDKBase URL 通常填https://taotoken.net/apiSDK 会自动拼接/v1/chat/completions这类路径。如果你直接fetch就要自己拼完整路径。第三步选一个 Model ID。进入模型对话页面https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite可以看到当前支持的模型列表。每个模型都有一个 ID比如gpt-4o-mini、claude-3-5-sonnet这类。先记下一个你打算用的后面写进.env的VITE_AI_MODEL变量。这里要强调「统一 Key」的价值。传统做法是每个模型平台注册一个账号、拿一个 Key、记一个 Base URL项目里到处散落着不同的配置联调时改一处忘一处。TaoToken 把这些收敛成一个 Key、一个 Base URL你的 Vue3 项目只需要一套环境变量Pinia store 里也只存一份配置维护成本大幅下降。对于课程作业或者小团队协作这种统一入口能省掉大量沟通成本。拿到 Key 之后先别急着写代码用curl在命令行验证一下 Key 是否有效。这一步能提前排除 Key 本身的问题避免后面在浏览器里排查半天发现是 Key 复制错了。验证命令在下一节给出。注意API Key 属于敏感凭证不要提交到 Git 仓库。.env文件要加进.gitignore团队协作时用.env.example做模板真实 Key 通过环境变量注入。3. 可复制配置.env 与 vite.config.ts 代理片段这一节是核心给出可以直接复制粘贴的配置文件。先看目录结构假设你的项目叫vue-demo根目录下应该有vite.config.ts、package.json、src/等。我们在根目录新建两个文件.env和.env.example。先写.env这是本地开发用的真实配置# .env VITE_AI_BASE_URLhttps://taotoken.net/api VITE_AI_API_KEYsk-你的真实Key粘贴在这里 VITE_AI_MODELgpt-4o-mini再写.env.example这是给团队看的模板不含真实 Key# .env.example VITE_AI_BASE_URLhttps://taotoken.net/api VITE_AI_API_KEYsk-your-key-here VITE_AI_MODELgpt-4o-miniVite 的环境变量有个硬性规则只有以VITE_开头的变量才会被注入到客户端代码里通过import.meta.env.VITE_XXX访问。这是为了防止你把服务端的敏感变量意外暴露到浏览器。所以命名一定要带VITE_前缀否则import.meta.env.VITE_AI_API_KEY会是undefined请求自然 401。接下来改vite.config.ts加上代理配置。完整的文件内容如下// vite.config.ts import { fileURLToPath, URL } from node:url import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue import vueDevTools from vite-plugin-vue-devtools export default defineConfig(({ mode }) { const env loadEnv(mode, process.cwd(), ) return { plugins: [vue(), vueDevTools()], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)), }, }, server: { port: 5173, proxy: { /api: { target: env.VITE_AI_BASE_URL || https://taotoken.net/api, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ), configure: (proxy) { proxy.on(proxyReq, (proxyReq) { const key env.VITE_AI_API_KEY if (key) { proxyReq.setHeader(Authorization, Bearer ${key}) } }) }, }, }, }, } })这段配置有几个关键点要解释。loadEnv(mode, process.cwd(), )的第三个参数传空字符串表示加载所有环境变量不只是VITE_开头的。这样代理配置里才能读到VITE_AI_API_KEY。target指向 TaoToken 的 Base URLchangeOrigin: true让请求头里的 Host 变成目标地址避免被服务端拒绝。rewrite把路径里的/api前缀去掉因为前端请求/api/v1/chat/completions转发到 TaoToken 时应该是/v1/chat/completions。最关键的是configure里的proxyReq钩子。它在代理请求发出前动态给请求头加上Authorization: Bearer 你的Key。这样做的好处是 Key 只存在于 Vite 开发服务器的内存里不会出现在浏览器网络面板的请求头中前端代码完全不用碰 Key。这是本地联调阶段最安全的做法。如果你用的是 Cline MCP 或者 Claude Code 这类工具做辅助开发它们的配置也需要三件套Base URL 填https://taotoken.net/apiKey 填你创建的那个Model ID 填gpt-4o-mini或你选的模型。Cline 的 MCP 配置里baseUrl、apiKey、model三个字段一一对应缺一个就会报local proxy failed或者OAuth相关的错误。Codex 的auth.json同理base_url、api_key、model三个键值要写全。配置改完后重启开发服务器。Vite 的vite.config.ts改动不会热更新必须CtrlC停掉再npm run dev。这一步很多人会忘然后疑惑为什么配置没生效。4. 验证请求curl 与前端调用双通道确认配置写好了先别急着在 Vue 组件里写代码用curl从命令行验证一遍把变量隔离出来。打开终端执行curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer sk-你的真实Key \ -d { model: gpt-4o-mini, messages: [{role: user, content: 你好回复一个字}], max_tokens: 10 }如果 Key 有效、模型 ID 正确你会看到类似这样的返回{ id: chatcmpl-xxx, object: chat.completion, created: 1730000000, model: gpt-4o-mini, choices: [ { index: 0, message: { role: assistant, content: 好 }, finish_reason: stop } ], usage: { prompt_tokens: 12, completion_tokens: 1, total_tokens: 13 } }看到choices数组里有内容说明 Key 和 Base URL 都没问题。如果返回 401检查 Key 是否复制完整、Bearer前缀是否漏了。如果返回 404检查路径是不是/v1/chat/completions别写成/chat/completions。命令行通了再验证 Vite 代理。在src下新建一个api/ai.ts写一个最小的请求函数// src/api/ai.ts export async function chatOnce(prompt: string): Promisestring { const res await fetch(/api/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ model: import.meta.env.VITE_AI_MODEL, messages: [{ role: user, content: prompt }], max_tokens: 50, }), }) if (!res.ok) { const errText await res.text() throw new Error(请求失败 ${res.status}: ${errText}) } const data await res.json() return data.choices?.[0]?.message?.content ?? }注意这里fetch的路径是/api/v1/chat/completions不是完整的https://taotoken.net/api/...。因为 Vite 代理会拦截/api开头的请求转发到 TaoToken并自动加上 Authorization 头。前端代码里没有 Key也没有跨域问题。然后在App.vue里临时加个按钮测试script setup langts import { ref } from vue import { chatOnce } from /api/ai const result ref() const loading ref(false) async function handleTest() { loading.value true try { result.value await chatOnce(用一句话介绍 Vue3) } catch (e) { result.value (e as Error).message } finally { loading.value false } } /script template button :disabledloading clickhandleTest {{ loading ? 请求中... : 测试 AI 接口 }} /button p{{ result }}/p /template保存后浏览器热更新点按钮。如果返回了模型生成的一句话说明整条链路通了Vue3 组件 → fetch/api/...→ Vite 代理 → TaoToken → 模型 → 原路返回。打开浏览器开发者工具的 Network 面板你会看到请求地址是http://localhost:5173/api/v1/chat/completions状态 200请求头里没有 Authorization因为代理在服务端加的响应正常。这就是成功的标志。如果你想把配置存进 Pinia可以建一个stores/ai.ts// src/stores/ai.ts import { defineStore } from pinia import { ref } from vue export const useAiStore defineStore(ai, () { const model ref(import.meta.env.VITE_AI_MODEL) const lastReply ref() function setModel(id: string) { model.value id } return { model, lastReply, setModel } })Pinia 在这里的作用是让模型 ID、对话历史这些状态在组件间共享比如设置页改了模型对话页立刻生效。TypeScript 的类型提示会让model.value始终是string避免拼错。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth联调阶段报错集中在几类逐个对照排查。401 Unauthorized。最常见。先确认.env里VITE_AI_API_KEY的值是不是完整的有没有多余空格或换行。然后确认vite.config.ts的configure钩子里Bearer前缀有没有写对正确格式是Bearer sk-xxx中间一个空格。如果你用的是 Cline MCP检查它的配置里apiKey字段是否填了Bearer前缀有些工具要求带有些不要求以工具文档为准。还有一种隐蔽情况.env改了但没重启npm run devVite 只在启动时读取环境变量热更新不会重新加载.env。local proxy failed。这个报错通常出现在 Cline MCP 或类似工具的日志里意思是工具尝试连接你配置的 Base URL 失败了。排查顺序先curl测 Base URL 是否可达再检查工具配置里的baseUrl是不是写成了https://taotoken.net/api/末尾多了斜杠可能导致路径拼接错误最后确认网络能正常访问该域名。如果curl通但工具报错多半是工具的配置字段名写错了比如把baseUrl写成了base_url。Cannot read properties of undefined (reading choices)。这个报错说明data.choices是undefined也就是返回的 JSON 结构和你预期的不一样。原因通常是请求打到了错误的端点返回了一个错误对象而不是正常的 completion 结构。检查rewrite规则确认/api/v1/chat/completions转发后变成了/v1/chat/completions而不是/api/v1/chat/completions原样转发。如果原样转发TaoToken 收到/api/v1/...会返回 404 或错误结构choices自然不存在。另外在chatOnce里加console.log(data)打印原始返回能快速看清结构。OAuth 相关报错。如果你在 Claude Code 或类似工具里看到 OAuth 字样说明工具在尝试走 OAuth 流程而不是 API Key 认证。这时候要检查工具的配置模式确保选的是「API Key」模式而不是「OAuth 登录」模式。Claude Code 的配置里Base URL 填https://taotoken.net/apiKey 填你的 KeyModel ID 填具体模型三件套齐全就不会触发 OAuth。如果工具强制走 OAuth查它的文档看怎么切换到 Key 模式。代理不生效请求直接打到 TaoToken 报 CORS。检查vite.config.ts里server.proxy的键是不是/api前端fetch的路径是不是以/api开头。两者必须匹配。如果前端写的是/v1/chat/completions代理不拦截浏览器直接跨域请求报 CORS。另外确认changeOrigin: true有没有加少了它某些服务端会拒绝。环境变量读不到import.meta.env.VITE_AI_MODEL是 undefined。检查变量名是否以VITE_开头检查.env文件是否在项目根目录和package.json同级检查是否重启了开发服务器。TypeScript 项目还需要在src/env.d.ts里声明类型否则 TS 会报「属性不存在」// src/env.d.ts /// reference typesvite/client / interface ImportMetaEnv { readonly VITE_AI_BASE_URL: string readonly VITE_AI_API_KEY: string readonly VITE_AI_MODEL: string } interface ImportMeta { readonly env: ImportMetaEnv }加上这段import.meta.env.VITE_AI_MODEL就有类型提示了拼错变量名 TS 会直接报错比运行时才发现要好。排查的核心思路是「分段隔离」先用curl确认 Key 和 Base URL 没问题再用浏览器 Network 面板确认代理转发路径和状态码最后看前端代码的解析逻辑。每一段都通了整条链路就通了。6. 把统一 Key 接入你的 Vue3 项目下一步做什么配置跑通之后你的 Vue3 TypeScript Pinia Vite 项目就有了一个可用的 AI 接口通道。接下来可以做的事把chatOnce扩展成支持流式输出用fetch的ReadableStream逐块读取配合 Pinia 维护对话历史把模型 ID 做成下拉选择从模型对话页面https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite拉取可用列表把 Key 从.env迁移到后端服务前端只调自己的后端进一步收紧安全边界。如果你打算长期在这个项目里做 AI 功能开发或者要接入 Agent 类的编码辅助可以了解一下 Coding Plan地址是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite它针对持续编码场景做了额度优化。日常调试接口、验证模型返回用模型对话页面就够了。Key 的管理和新建在 API Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入细节和参数说明看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite。最后留一个实用技巧在package.json里加一个脚本启动前检查.env是否存在避免新克隆项目的人忘了配置{ scripts: { dev: node -e \require(fs).existsSync(.env)||console.error(缺少 .env请复制 .env.example)\ vite } }这样团队协作时谁忘了配环境变量启动瞬间就能看到提示不用等到请求 401 才回头找原因。环境搭建这件事把配置固化下来、把验证步骤脚本化后面每次联调都能省下重复排查的时间。
1. Vue3 TypeScript Pinia Vite 项目初始化后前端调用 AI 接口为什么本地代理失败你按课程 2.3 的步骤走完npm create vuelatest勾了 TypeScript、Router、Pinia、Prettiernpm install装完依赖npm run dev打开http://localhost:5173看到欢迎页一切正常。然后你想在页面里加一个「AI 对话」小功能前端直接fetch一个模型接口结果浏览器控制台甩给你一串红字net::ERR_FAILED、CORS policy、或者401 Unauthorized。这就是本节要解决的场景——Vue3 TypeScript Pinia Vite 项目初始化后前端调用 AI 接口时本地代理失败、401 报错的排查。先说清楚为什么会失败。浏览器出于安全策略默认禁止跨域请求也就是你的页面跑在localhost:5173而模型接口在另一个域名浏览器会先发一个OPTIONS预检请求对方没返回正确的Access-Control-Allow-Origin头请求就被拦下。很多人第一反应是把接口地址直接写进前端代码这有两个问题一是跨域二是你的 API Key 会明文暴露在浏览器里任何人打开 F12 都能看到。正确做法是让 Vite 的开发服务器做一层代理前端请求/api开头的路径Vite 转发到真正的接口地址浏览器看到的是同源请求跨域问题消失Key 也留在服务端配置里。那为什么还会 401401 是「未授权」通常有三种原因Key 没传、Key 传错、或者请求头格式不对。比如你把 Key 写成了Authorization: sk-xxx但接口要求的是Authorization: Bearer sk-xxx少了Bearer前缀就会 401。还有一种情况是代理配置里rewrite把路径改错了请求打到了不存在的端点服务端返回 401 而不是 404容易误导排查方向。这一节的目标很明确把 Vue3 TypeScript Pinia Vite 项目的 AI 接口调用链路打通用 TaoToken 统一 Key 管理给出可复制的.env和vite.config.ts代理配置再用curl验证请求成功最后把常见报错对照表列出来。适合刚搭完环境、准备做首次联调的开发者也适合被 401 和代理失败卡住、想快速定位问题的同学。我试过在三个不同项目里重复这套配置踩过的坑主要集中在环境变量前缀和代理 rewrite 上下面一步步来。2. TaoToken 前置准备统一 Key 与 Base URL 的获取在动手改配置之前先把「钥匙」拿到手。TaoToken 的作用是给你一个统一的 API 入口和 Key前端项目不用关心背后接的是哪个模型只认一个 Base URL 和一个 Key切换模型时改 Model ID 就行。这对 Vue3 项目特别友好因为你的 Pinia store 里只需要维护一份配置。第一步打开官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册并登录。登录后进入控制台地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite在左侧菜单找到「API Keys」点「创建新的 Key」。创建时给它起个名字比如vue-demo-dev方便区分不同项目。创建完成后Key 只会完整显示一次复制下来存到安全的地方后面配置.env要用。第二步确认 Base URL。TaoToken 的 API 入口是https://taotoken.net/api注意这个地址不带任何查询参数是纯净的接口根路径。你在前端配置里填的就是它。如果你用的是 OpenAI 兼容的 SDKBase URL 通常填https://taotoken.net/apiSDK 会自动拼接/v1/chat/completions这类路径。如果你直接fetch就要自己拼完整路径。第三步选一个 Model ID。进入模型对话页面https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite可以看到当前支持的模型列表。每个模型都有一个 ID比如gpt-4o-mini、claude-3-5-sonnet这类。先记下一个你打算用的后面写进.env的VITE_AI_MODEL变量。这里要强调「统一 Key」的价值。传统做法是每个模型平台注册一个账号、拿一个 Key、记一个 Base URL项目里到处散落着不同的配置联调时改一处忘一处。TaoToken 把这些收敛成一个 Key、一个 Base URL你的 Vue3 项目只需要一套环境变量Pinia store 里也只存一份配置维护成本大幅下降。对于课程作业或者小团队协作这种统一入口能省掉大量沟通成本。拿到 Key 之后先别急着写代码用curl在命令行验证一下 Key 是否有效。这一步能提前排除 Key 本身的问题避免后面在浏览器里排查半天发现是 Key 复制错了。验证命令在下一节给出。注意API Key 属于敏感凭证不要提交到 Git 仓库。.env文件要加进.gitignore团队协作时用.env.example做模板真实 Key 通过环境变量注入。3. 可复制配置.env 与 vite.config.ts 代理片段这一节是核心给出可以直接复制粘贴的配置文件。先看目录结构假设你的项目叫vue-demo根目录下应该有vite.config.ts、package.json、src/等。我们在根目录新建两个文件.env和.env.example。先写.env这是本地开发用的真实配置# .env VITE_AI_BASE_URLhttps://taotoken.net/api VITE_AI_API_KEYsk-你的真实Key粘贴在这里 VITE_AI_MODELgpt-4o-mini再写.env.example这是给团队看的模板不含真实 Key# .env.example VITE_AI_BASE_URLhttps://taotoken.net/api VITE_AI_API_KEYsk-your-key-here VITE_AI_MODELgpt-4o-miniVite 的环境变量有个硬性规则只有以VITE_开头的变量才会被注入到客户端代码里通过import.meta.env.VITE_XXX访问。这是为了防止你把服务端的敏感变量意外暴露到浏览器。所以命名一定要带VITE_前缀否则import.meta.env.VITE_AI_API_KEY会是undefined请求自然 401。接下来改vite.config.ts加上代理配置。完整的文件内容如下// vite.config.ts import { fileURLToPath, URL } from node:url import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue import vueDevTools from vite-plugin-vue-devtools export default defineConfig(({ mode }) { const env loadEnv(mode, process.cwd(), ) return { plugins: [vue(), vueDevTools()], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)), }, }, server: { port: 5173, proxy: { /api: { target: env.VITE_AI_BASE_URL || https://taotoken.net/api, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ), configure: (proxy) { proxy.on(proxyReq, (proxyReq) { const key env.VITE_AI_API_KEY if (key) { proxyReq.setHeader(Authorization, Bearer ${key}) } }) }, }, }, }, } })这段配置有几个关键点要解释。loadEnv(mode, process.cwd(), )的第三个参数传空字符串表示加载所有环境变量不只是VITE_开头的。这样代理配置里才能读到VITE_AI_API_KEY。target指向 TaoToken 的 Base URLchangeOrigin: true让请求头里的 Host 变成目标地址避免被服务端拒绝。rewrite把路径里的/api前缀去掉因为前端请求/api/v1/chat/completions转发到 TaoToken 时应该是/v1/chat/completions。最关键的是configure里的proxyReq钩子。它在代理请求发出前动态给请求头加上Authorization: Bearer 你的Key。这样做的好处是 Key 只存在于 Vite 开发服务器的内存里不会出现在浏览器网络面板的请求头中前端代码完全不用碰 Key。这是本地联调阶段最安全的做法。如果你用的是 Cline MCP 或者 Claude Code 这类工具做辅助开发它们的配置也需要三件套Base URL 填https://taotoken.net/apiKey 填你创建的那个Model ID 填gpt-4o-mini或你选的模型。Cline 的 MCP 配置里baseUrl、apiKey、model三个字段一一对应缺一个就会报local proxy failed或者OAuth相关的错误。Codex 的auth.json同理base_url、api_key、model三个键值要写全。配置改完后重启开发服务器。Vite 的vite.config.ts改动不会热更新必须CtrlC停掉再npm run dev。这一步很多人会忘然后疑惑为什么配置没生效。4. 验证请求curl 与前端调用双通道确认配置写好了先别急着在 Vue 组件里写代码用curl从命令行验证一遍把变量隔离出来。打开终端执行curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer sk-你的真实Key \ -d { model: gpt-4o-mini, messages: [{role: user, content: 你好回复一个字}], max_tokens: 10 }如果 Key 有效、模型 ID 正确你会看到类似这样的返回{ id: chatcmpl-xxx, object: chat.completion, created: 1730000000, model: gpt-4o-mini, choices: [ { index: 0, message: { role: assistant, content: 好 }, finish_reason: stop } ], usage: { prompt_tokens: 12, completion_tokens: 1, total_tokens: 13 } }看到choices数组里有内容说明 Key 和 Base URL 都没问题。如果返回 401检查 Key 是否复制完整、Bearer前缀是否漏了。如果返回 404检查路径是不是/v1/chat/completions别写成/chat/completions。命令行通了再验证 Vite 代理。在src下新建一个api/ai.ts写一个最小的请求函数// src/api/ai.ts export async function chatOnce(prompt: string): Promisestring { const res await fetch(/api/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ model: import.meta.env.VITE_AI_MODEL, messages: [{ role: user, content: prompt }], max_tokens: 50, }), }) if (!res.ok) { const errText await res.text() throw new Error(请求失败 ${res.status}: ${errText}) } const data await res.json() return data.choices?.[0]?.message?.content ?? }注意这里fetch的路径是/api/v1/chat/completions不是完整的https://taotoken.net/api/...。因为 Vite 代理会拦截/api开头的请求转发到 TaoToken并自动加上 Authorization 头。前端代码里没有 Key也没有跨域问题。然后在App.vue里临时加个按钮测试script setup langts import { ref } from vue import { chatOnce } from /api/ai const result ref() const loading ref(false) async function handleTest() { loading.value true try { result.value await chatOnce(用一句话介绍 Vue3) } catch (e) { result.value (e as Error).message } finally { loading.value false } } /script template button :disabledloading clickhandleTest {{ loading ? 请求中... : 测试 AI 接口 }} /button p{{ result }}/p /template保存后浏览器热更新点按钮。如果返回了模型生成的一句话说明整条链路通了Vue3 组件 → fetch/api/...→ Vite 代理 → TaoToken → 模型 → 原路返回。打开浏览器开发者工具的 Network 面板你会看到请求地址是http://localhost:5173/api/v1/chat/completions状态 200请求头里没有 Authorization因为代理在服务端加的响应正常。这就是成功的标志。如果你想把配置存进 Pinia可以建一个stores/ai.ts// src/stores/ai.ts import { defineStore } from pinia import { ref } from vue export const useAiStore defineStore(ai, () { const model ref(import.meta.env.VITE_AI_MODEL) const lastReply ref() function setModel(id: string) { model.value id } return { model, lastReply, setModel } })Pinia 在这里的作用是让模型 ID、对话历史这些状态在组件间共享比如设置页改了模型对话页立刻生效。TypeScript 的类型提示会让model.value始终是string避免拼错。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth联调阶段报错集中在几类逐个对照排查。401 Unauthorized。最常见。先确认.env里VITE_AI_API_KEY的值是不是完整的有没有多余空格或换行。然后确认vite.config.ts的configure钩子里Bearer前缀有没有写对正确格式是Bearer sk-xxx中间一个空格。如果你用的是 Cline MCP检查它的配置里apiKey字段是否填了Bearer前缀有些工具要求带有些不要求以工具文档为准。还有一种隐蔽情况.env改了但没重启npm run devVite 只在启动时读取环境变量热更新不会重新加载.env。local proxy failed。这个报错通常出现在 Cline MCP 或类似工具的日志里意思是工具尝试连接你配置的 Base URL 失败了。排查顺序先curl测 Base URL 是否可达再检查工具配置里的baseUrl是不是写成了https://taotoken.net/api/末尾多了斜杠可能导致路径拼接错误最后确认网络能正常访问该域名。如果curl通但工具报错多半是工具的配置字段名写错了比如把baseUrl写成了base_url。Cannot read properties of undefined (reading choices)。这个报错说明data.choices是undefined也就是返回的 JSON 结构和你预期的不一样。原因通常是请求打到了错误的端点返回了一个错误对象而不是正常的 completion 结构。检查rewrite规则确认/api/v1/chat/completions转发后变成了/v1/chat/completions而不是/api/v1/chat/completions原样转发。如果原样转发TaoToken 收到/api/v1/...会返回 404 或错误结构choices自然不存在。另外在chatOnce里加console.log(data)打印原始返回能快速看清结构。OAuth 相关报错。如果你在 Claude Code 或类似工具里看到 OAuth 字样说明工具在尝试走 OAuth 流程而不是 API Key 认证。这时候要检查工具的配置模式确保选的是「API Key」模式而不是「OAuth 登录」模式。Claude Code 的配置里Base URL 填https://taotoken.net/apiKey 填你的 KeyModel ID 填具体模型三件套齐全就不会触发 OAuth。如果工具强制走 OAuth查它的文档看怎么切换到 Key 模式。代理不生效请求直接打到 TaoToken 报 CORS。检查vite.config.ts里server.proxy的键是不是/api前端fetch的路径是不是以/api开头。两者必须匹配。如果前端写的是/v1/chat/completions代理不拦截浏览器直接跨域请求报 CORS。另外确认changeOrigin: true有没有加少了它某些服务端会拒绝。环境变量读不到import.meta.env.VITE_AI_MODEL是 undefined。检查变量名是否以VITE_开头检查.env文件是否在项目根目录和package.json同级检查是否重启了开发服务器。TypeScript 项目还需要在src/env.d.ts里声明类型否则 TS 会报「属性不存在」// src/env.d.ts /// reference typesvite/client / interface ImportMetaEnv { readonly VITE_AI_BASE_URL: string readonly VITE_AI_API_KEY: string readonly VITE_AI_MODEL: string } interface ImportMeta { readonly env: ImportMetaEnv }加上这段import.meta.env.VITE_AI_MODEL就有类型提示了拼错变量名 TS 会直接报错比运行时才发现要好。排查的核心思路是「分段隔离」先用curl确认 Key 和 Base URL 没问题再用浏览器 Network 面板确认代理转发路径和状态码最后看前端代码的解析逻辑。每一段都通了整条链路就通了。6. 把统一 Key 接入你的 Vue3 项目下一步做什么配置跑通之后你的 Vue3 TypeScript Pinia Vite 项目就有了一个可用的 AI 接口通道。接下来可以做的事把chatOnce扩展成支持流式输出用fetch的ReadableStream逐块读取配合 Pinia 维护对话历史把模型 ID 做成下拉选择从模型对话页面https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite拉取可用列表把 Key 从.env迁移到后端服务前端只调自己的后端进一步收紧安全边界。如果你打算长期在这个项目里做 AI 功能开发或者要接入 Agent 类的编码辅助可以了解一下 Coding Plan地址是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite它针对持续编码场景做了额度优化。日常调试接口、验证模型返回用模型对话页面就够了。Key 的管理和新建在 API Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入细节和参数说明看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite。最后留一个实用技巧在package.json里加一个脚本启动前检查.env是否存在避免新克隆项目的人忘了配置{ scripts: { dev: node -e \require(fs).existsSync(.env)||console.error(缺少 .env请复制 .env.example)\ vite } }这样团队协作时谁忘了配环境变量启动瞬间就能看到提示不用等到请求 401 才回头找原因。环境搭建这件事把配置固化下来、把验证步骤脚本化后面每次联调都能省下重复排查的时间。
