Vue3 /api 代理取不到 gdp.json？用 TaoToken 接入的 Codex 改 vite.config.js

1. 为什么/api/gdp.json在 Vue3 里总是取不到数据你在 VS Code 里用 Five Server 把mockData目录跑成了http://127.0.0.1:5555的静态服务浏览器直接打开http://127.0.0.1:5555/gdp.json能看到 JSON说明数据服务本身没问题。接着你在vite.config.js里写了/api代理target指向http://127.0.0.1:5555/mockDatarewrite把/api前缀去掉然后在app.vue里fetch(/api/gdp.json)结果页面空白、控制台报 404 或者返回 HTML。原文到这里只留下一句「这样就生效了」没有任何排障路径这正是大多数人卡住的地方。这个问题的本质是Vite 的 dev server 代理只在开发服务器进程内生效它把浏览器发来的/api/gdp.json转发到target指定的地址再按rewrite改写路径。只要target端口、rewrite正则、Five Server 实际监听端口三者有一个对不上请求就会 404 或拿到错误内容。而 Five Server 默认端口不一定是 5555mockData是否作为根路径也会影响target该不该带/mockData。这些细节靠肉眼翻文档很难一次配对所以我更推荐把「代理配置 Network 返回状态」一起交给 Codex 逐条比对让它帮你定位是哪一环错位。TaoToken 在这里只负责提供 Key 和 Base URL不替你做代理、也不碰你的vite.config.js真正干活的是 Codex 的排查对话。这篇适合正在用 Vue3 Vite 做前端、用 VS Code 插件模拟接口数据、被/api代理 404 卡住的同学。下面按「先拿 Key → 配 Codex → 贴配置排障 → 验证渲染」的顺序走一遍。2. 前置注册 TaoToken 并创建一把 KeyCodex 需要一个可用的模型入口这里用 TaoToken 来供 Key 和 Base URL。打开官网注册账号https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册登录后进入控制台创建 API Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite在 API Keys 页面点新建复制生成的 Key形如sk-...先存到本地环境变量里别硬编码进前端代码# macOS / Linux export TAOTOKEN_API_KEYsk-你的key # Windows PowerShell $env:TAOTOKEN_API_KEYsk-你的keyBase URL 填这个注意不带/v1、不加任何 UTM 参数https://taotoken.net/apiKey 管理页在这里后面如果 Key 泄露或额度用完回来重新生成即可https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite注意TaoToken 只提供 Key 和 Base URL它不会帮你改vite.config.js也不会替你启动 Five Server。代理能不能通取决于你贴给 Codex 的配置和实际端口是否一致。3. 把 Codex 接到 TaoToken 并让它读你的代理配置Codex 的配置方式取决于你用的是 CLI 还是 IDE 插件核心就是把 Base URL 指向https://taotoken.net/api把 Key 用环境变量注入。以 CLI 为例配置文件通常放在~/.codex/config.toml或项目内.codex/config.toml# ~/.codex/config.toml model gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api responses如果你用的是 Anthropic 风格的接入比如 Claude Code 那套Base URL 同样填https://taotoken.net/apiKey 走环境变量。相关文档在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite配好后先跑一次最小验证确认 Codex 能正常对话codex 用一句话说明 Vite dev server 的 proxy 是在哪个进程里生效的能正常返回说明 Key 和 Base URL 通了。接下来才是重点把下面三样东西一起贴给 Codex让它逐条对照。第一样你的vite.config.js代理段// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://127.0.0.1:5555/mockData, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ), }, }, }, })第二样Five Server 实际监听的端口和根目录。打开 VS Code 的 Five Server 输出面板或看它启动时弹出的地址确认到底是5555还是5500以及mockData是不是被当成了根。如果 Five Server 的根就是mockData那target应该写成http://127.0.0.1:5555而不是带/mockData。第三样浏览器 Network 里/api/gdp.json的返回状态码和响应体。是 404、200 但返回 HTML、还是 CORS 报错这三种对应完全不同的修法。把这三样贴给 Codex让它输出一份「端口 / 前缀 / rewrite 是否对得上」的对照结论。这一步才是真正消耗 Token 的地方也是它比你自己翻文档快的原因。4. 可复制配置让代理和 Five Server 对齐假设 Codex 对照后确认 Five Server 实际跑在5555且mockData是它的根目录那么target不该再带/mockData否则转发地址会变成http://127.0.0.1:5555/mockData/gdp.json而实际文件在http://127.0.0.1:5555/gdp.json自然 404。修正后的配置// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://127.0.0.1:5555, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ), }, }, }, })如果 Five Server 的根是项目根目录、mockData是子目录那target才需要带/mockDatatarget: http://127.0.0.1:5555/mockData,changeOrigin: true建议保留它会把转发请求的 Host 头改成目标地址避免某些静态服务因 Host 不匹配拒绝响应。rewrite的正则/^\/api/只替换开头的/api/api/gdp.json会变成/gdp.json这是对的但如果你写成/\/api/g全局替换路径里其他位置的api也会被误伤。app.vue里的请求保持原样即可template div p v-ifloading加载中.../p ul v-else li v-for(item, i) in gdp :keyi{{ item }}/li /ul /div /template script import { ref } from vue export default { setup() { const gdp ref([]) const loading ref(true) async function fetchGdp() { try { const resp await fetch(/api/gdp.json) if (!resp.ok) { throw new Error(HTTP ${resp.status}) } gdp.value await resp.json() } catch (e) { console.error(fetch gdp 失败:, e) } finally { loading.value false } } fetchGdp() return { gdp, loading } }, } /script这里加了resp.ok判断和try/catch比原文裸fetch更容易看出是 404 还是解析失败。改完vite.config.js必须重启 dev server代理配置不会热更新。5. 验证请求确认 gdp 数组真的渲染到页面重启 Vitenpm run dev打开浏览器按 F12 进 Network刷新页面找/api/gdp.json这条请求。正常情况应该是检查项期望结果异常含义请求 URLhttp://localhost:5173/api/gdp.json说明请求发给了 Vite dev server状态码200404 说明 target/rewrite 错位响应类型application/json返回text/html说明打到了 Vite 自身响应体gdp 数组空数组说明文件路径不对如果状态码 200 但响应体是 Vite 的index.html说明代理没命中请求被 Vite 的 SPA fallback 接走了通常是proxy键名或层级写错。如果 404把 Network 里的完整请求 URL 和vite.config.js一起再贴给 Codex让它算一遍转发后的实际地址。页面侧确认gdp数组渲染出来v-ifloading消失、列表出现就说明整条链路通了。这一步的验证成本很低但能直接区分「代理没通」和「数据拿到了但渲染有问题」。6. 本篇常见错排查端口对不上Five Server 默认端口可能是5500你写5555就永远连不上。看 Five Server 输出面板的实际地址或直接在浏览器打开http://127.0.0.1:5555/gdp.json确认能访问再配代理。target 多带或少带/mockData这是最高频的坑。判断方法很简单——浏览器直接访问target rewrite 后的路径能拿到 JSON 就说明 target 对了。比如 target 是http://127.0.0.1:5555/mockData那就访问http://127.0.0.1:5555/mockData/gdp.json。改了配置没重启vite.config.js的server.proxy改动必须重启 dev server热更新不生效。很多人改完刷新页面还是 404就是没重启。rewrite 正则写错/^\/api/只替换开头/\/api/g会全局替换。如果你的接口路径里还有别的api段全局替换会把它们也删掉。请求发到了生产域名检查fetch用的是相对路径/api/gdp.json不是绝对路径http://xxx/api/gdp.json否则代理不生效。CORS 报错如果 Five Server 没开 CORS 且代理没生效浏览器会拦。代理生效后请求是同源的不会再有 CORS 问题。把上面这些现象连同 Network 截图一起丢给 Codex让它按「端口 → target → rewrite → 重启」的顺序逐条排除比你自己反复换插件试要快得多。如果排查过程中需要确认模型侧的行为可以直接在模型对话里问https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite长期做前端编码、想让 Codex 持续参与这类配置排查的可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite接入文档和 API Keys 管理分别在这里排障时按需取用https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite最后补一个我踩过的坑Five Server 和 Live Server 同时装着的时候右键菜单可能只显示其中一个别以为是插件坏了去扩展面板禁用另一个再右键。代理配通之后gdp.json换成任何 mock 文件都一样能取这套排查路径可以复用。