1. 為什么/api/gdp.json在 Vue3 里總是取不到數(shù)據(jù)你在 VS Code 里用 Five Server 把mockData目錄跑成了http://127.0.0.1:5555的靜態(tài)服務(wù)瀏覽器直接打開http://127.0.0.1:5555/gdp.json能看到 JSON說明數(shù)據(jù)服務(wù)本身沒問題。接著你在vite.config.js里寫了/api代理target指向http://127.0.0.1:5555/mockDatarewrite把/api前綴去掉然后在app.vue里fetch(/api/gdp.json)結(jié)果頁面空白、控制臺(tái)報(bào) 404 或者返回 HTML。原文到這里只留下一句「這樣就生效了」沒有任何排障路徑這正是大多數(shù)人卡住的地方。這個(gè)問題的本質(zhì)是Vite 的 dev server 代理只在開發(fā)服務(wù)器進(jìn)程內(nèi)生效它把瀏覽器發(fā)來的/api/gdp.json轉(zhuǎn)發(fā)到target指定的地址再按rewrite改寫路徑。只要target端口、rewrite正則、Five Server 實(shí)際監(jiān)聽端口三者有一個(gè)對(duì)不上請(qǐng)求就會(huì) 404 或拿到錯(cuò)誤內(nèi)容。而 Five Server 默認(rèn)端口不一定是 5555mockData是否作為根路徑也會(huì)影響target該不該帶/mockData。這些細(xì)節(jié)靠肉眼翻文檔很難一次配對(duì)所以我更推薦把「代理配置 Network 返回狀態(tài)」一起交給 Codex 逐條比對(duì)讓它幫你定位是哪一環(huán)錯(cuò)位。TaoToken 在這里只負(fù)責(zé)提供 Key 和 Base URL不替你做代理、也不碰你的vite.config.js真正干活的是 Codex 的排查對(duì)話。這篇適合正在用 Vue3 Vite 做前端、用 VS Code 插件模擬接口數(shù)據(jù)、被/api代理 404 卡住的同學(xué)。下面按「先拿 Key → 配 Codex → 貼配置排障 → 驗(yàn)證渲染」的順序走一遍。2. 前置注冊(cè) TaoToken 并創(chuàng)建一把 KeyCodex 需要一個(gè)可用的模型入口這里用 TaoToken 來供 Key 和 Base URL。打開官網(wǎng)注冊(cè)賬號(hào)https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注冊(cè)登錄后進(jìn)入控制臺(tái)創(chuàng)建 API Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite在 API Keys 頁面點(diǎn)新建復(fù)制生成的 Key形如sk-...先存到本地環(huán)境變量里別硬編碼進(jìn)前端代碼# macOS / Linux export TAOTOKEN_API_KEYsk-你的key # Windows PowerShell $env:TAOTOKEN_API_KEYsk-你的keyBase URL 填這個(gè)注意不帶/v1、不加任何 UTM 參數(shù)https://taotoken.net/apiKey 管理頁在這里后面如果 Key 泄露或額度用完回來重新生成即可https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite注意TaoToken 只提供 Key 和 Base URL它不會(huì)幫你改vite.config.js也不會(huì)替你啟動(dòng) Five Server。代理能不能通取決于你貼給 Codex 的配置和實(shí)際端口是否一致。3. 把 Codex 接到 TaoToken 并讓它讀你的代理配置Codex 的配置方式取決于你用的是 CLI 還是 IDE 插件核心就是把 Base URL 指向https://taotoken.net/api把 Key 用環(huán)境變量注入。以 CLI 為例配置文件通常放在~/.codex/config.toml或項(xiàng)目內(nèi).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 風(fēng)格的接入比如 Claude Code 那套Base URL 同樣填https://taotoken.net/apiKey 走環(huán)境變量。相關(guān)文檔在這里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite配好后先跑一次最小驗(yàn)證確認(rèn) Codex 能正常對(duì)話codex 用一句話說明 Vite dev server 的 proxy 是在哪個(gè)進(jìn)程里生效的能正常返回說明 Key 和 Base URL 通了。接下來才是重點(diǎn)把下面三樣?xùn)|西一起貼給 Codex讓它逐條對(duì)照。第一樣你的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 實(shí)際監(jiān)聽的端口和根目錄。打開 VS Code 的 Five Server 輸出面板或看它啟動(dòng)時(shí)彈出的地址確認(rèn)到底是5555還是5500以及mockData是不是被當(dāng)成了根。如果 Five Server 的根就是mockData那target應(yīng)該寫成http://127.0.0.1:5555而不是帶/mockData。第三樣瀏覽器 Network 里/api/gdp.json的返回狀態(tài)碼和響應(yīng)體。是 404、200 但返回 HTML、還是 CORS 報(bào)錯(cuò)這三種對(duì)應(yīng)完全不同的修法。把這三樣貼給 Codex讓它輸出一份「端口 / 前綴 / rewrite 是否對(duì)得上」的對(duì)照結(jié)論。這一步才是真正消耗 Token 的地方也是它比你自己翻文檔快的原因。4. 可復(fù)制配置讓代理和 Five Server 對(duì)齊假設(shè) Codex 對(duì)照后確認(rèn) Five Server 實(shí)際跑在5555且mockData是它的根目錄那么target不該再帶/mockData否則轉(zhuǎn)發(fā)地址會(huì)變成http://127.0.0.1:5555/mockData/gdp.json而實(shí)際文件在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 的根是項(xiàng)目根目錄、mockData是子目錄那target才需要帶/mockDatatarget: http://127.0.0.1:5555/mockData,changeOrigin: true建議保留它會(huì)把轉(zhuǎn)發(fā)請(qǐng)求的 Host 頭改成目標(biāo)地址避免某些靜態(tài)服務(wù)因 Host 不匹配拒絕響應(yīng)。rewrite的正則/^\/api/只替換開頭的/api/api/gdp.json會(huì)變成/gdp.json這是對(duì)的但如果你寫成/\/api/g全局替換路徑里其他位置的api也會(huì)被誤傷。app.vue里的請(qǐng)求保持原樣即可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代理配置不會(huì)熱更新。5. 驗(yàn)證請(qǐng)求確認(rèn) gdp 數(shù)組真的渲染到頁面重啟 Vitenpm run dev打開瀏覽器按 F12 進(jìn) Network刷新頁面找/api/gdp.json這條請(qǐng)求。正常情況應(yīng)該是檢查項(xiàng)期望結(jié)果異常含義請(qǐng)求 URLhttp://localhost:5173/api/gdp.json說明請(qǐng)求發(fā)給了 Vite dev server狀態(tài)碼200404 說明 target/rewrite 錯(cuò)位響應(yīng)類型application/json返回text/html說明打到了 Vite 自身響應(yīng)體gdp 數(shù)組空數(shù)組說明文件路徑不對(duì)如果狀態(tài)碼 200 但響應(yīng)體是 Vite 的index.html說明代理沒命中請(qǐng)求被 Vite 的 SPA fallback 接走了通常是proxy鍵名或?qū)蛹?jí)寫錯(cuò)。如果 404把 Network 里的完整請(qǐng)求 URL 和vite.config.js一起再貼給 Codex讓它算一遍轉(zhuǎn)發(fā)后的實(shí)際地址。頁面?zhèn)却_認(rèn)gdp數(shù)組渲染出來v-ifloading消失、列表出現(xiàn)就說明整條鏈路通了。這一步的驗(yàn)證成本很低但能直接區(qū)分「代理沒通」和「數(shù)據(jù)拿到了但渲染有問題」。6. 本篇常見錯(cuò)排查端口對(duì)不上Five Server 默認(rèn)端口可能是5500你寫5555就永遠(yuǎn)連不上?？?Five Server 輸出面板的實(shí)際地址或直接在瀏覽器打開http://127.0.0.1:5555/gdp.json確認(rèn)能訪問再配代理。target 多帶或少帶/mockData這是最高頻的坑。判斷方法很簡單——瀏覽器直接訪問target rewrite 后的路徑能拿到 JSON 就說明 target 對(duì)了。比如 target 是http://127.0.0.1:5555/mockData那就訪問http://127.0.0.1:5555/mockData/gdp.json。改了配置沒重啟vite.config.js的server.proxy改動(dòng)必須重啟 dev server熱更新不生效。很多人改完刷新頁面還是 404就是沒重啟。rewrite 正則寫錯(cuò)/^\/api/只替換開頭/\/api/g會(huì)全局替換。如果你的接口路徑里還有別的api段全局替換會(huì)把它們也刪掉。請(qǐng)求發(fā)到了生產(chǎn)域名檢查fetch用的是相對(duì)路徑/api/gdp.json不是絕對(duì)路徑http://xxx/api/gdp.json否則代理不生效。CORS 報(bào)錯(cuò)如果 Five Server 沒開 CORS 且代理沒生效瀏覽器會(huì)攔。代理生效后請(qǐng)求是同源的不會(huì)再有 CORS 問題。把上面這些現(xiàn)象連同 Network 截圖一起丟給 Codex讓它按「端口 → target → rewrite → 重啟」的順序逐條排除比你自己反復(fù)換插件試要快得多。如果排查過程中需要確認(rèn)模型側(cè)的行為可以直接在模型對(duì)話里問https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite長期做前端編碼、想讓 Codex 持續(xù)參與這類配置排查的可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite接入文檔和 API Keys 管理分別在這里排障時(shí)按需取用https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite最后補(bǔ)一個(gè)我踩過的坑Five Server 和 Live Server 同時(shí)裝著的時(shí)候右鍵菜單可能只顯示其中一個(gè)別以為是插件壞了去擴(kuò)展面板禁用另一個(gè)再右鍵。代理配通之后gdp.json換成任何 mock 文件都一樣能取這套排查路徑可以復(fù)用。 Vue3 /api 代理取不到 gdp.json？用 TaoToken 接入的 Codex 改 vite.config.js
1. 為什么/api/gdp.json在 Vue3 里總是取不到數(shù)據(jù)你在 VS Code 里用 Five Server 把mockData目錄跑成了http://127.0.0.1:5555的靜態(tài)服務(wù)瀏覽器直接打開http://127.0.0.1:5555/gdp.json能看到 JSON說明數(shù)據(jù)服務(wù)本身沒問題。接著你在vite.config.js里寫了/api代理target指向http://127.0.0.1:5555/mockDatarewrite把/api前綴去掉然后在app.vue里fetch(/api/gdp.json)結(jié)果頁面空白、控制臺(tái)報(bào) 404 或者返回 HTML。原文到這里只留下一句「這樣就生效了」沒有任何排障路徑這正是大多數(shù)人卡住的地方。這個(gè)問題的本質(zhì)是Vite 的 dev server 代理只在開發(fā)服務(wù)器進(jìn)程內(nèi)生效它把瀏覽器發(fā)來的/api/gdp.json轉(zhuǎn)發(fā)到target指定的地址再按rewrite改寫路徑。只要target端口、rewrite正則、Five Server 實(shí)際監(jiān)聽端口三者有一個(gè)對(duì)不上請(qǐng)求就會(huì) 404 或拿到錯(cuò)誤內(nèi)容。而 Five Server 默認(rèn)端口不一定是 5555mockData是否作為根路徑也會(huì)影響target該不該帶/mockData。這些細(xì)節(jié)靠肉眼翻文檔很難一次配對(duì)所以我更推薦把「代理配置 Network 返回狀態(tài)」一起交給 Codex 逐條比對(duì)讓它幫你定位是哪一環(huán)錯(cuò)位。TaoToken 在這里只負(fù)責(zé)提供 Key 和 Base URL不替你做代理、也不碰你的vite.config.js真正干活的是 Codex 的排查對(duì)話。這篇適合正在用 Vue3 Vite 做前端、用 VS Code 插件模擬接口數(shù)據(jù)、被/api代理 404 卡住的同學(xué)。下面按「先拿 Key → 配 Codex → 貼配置排障 → 驗(yàn)證渲染」的順序走一遍。2. 前置注冊(cè) TaoToken 并創(chuàng)建一把 KeyCodex 需要一個(gè)可用的模型入口這里用 TaoToken 來供 Key 和 Base URL。打開官網(wǎng)注冊(cè)賬號(hào)https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注冊(cè)登錄后進(jìn)入控制臺(tái)創(chuàng)建 API Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite在 API Keys 頁面點(diǎn)新建復(fù)制生成的 Key形如sk-...先存到本地環(huán)境變量里別硬編碼進(jìn)前端代碼# macOS / Linux export TAOTOKEN_API_KEYsk-你的key # Windows PowerShell $env:TAOTOKEN_API_KEYsk-你的keyBase URL 填這個(gè)注意不帶/v1、不加任何 UTM 參數(shù)https://taotoken.net/apiKey 管理頁在這里后面如果 Key 泄露或額度用完回來重新生成即可https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite注意TaoToken 只提供 Key 和 Base URL它不會(huì)幫你改vite.config.js也不會(huì)替你啟動(dòng) Five Server。代理能不能通取決于你貼給 Codex 的配置和實(shí)際端口是否一致。3. 把 Codex 接到 TaoToken 并讓它讀你的代理配置Codex 的配置方式取決于你用的是 CLI 還是 IDE 插件核心就是把 Base URL 指向https://taotoken.net/api把 Key 用環(huán)境變量注入。以 CLI 為例配置文件通常放在~/.codex/config.toml或項(xiàng)目內(nèi).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 風(fēng)格的接入比如 Claude Code 那套Base URL 同樣填https://taotoken.net/apiKey 走環(huán)境變量。相關(guān)文檔在這里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite配好后先跑一次最小驗(yàn)證確認(rèn) Codex 能正常對(duì)話codex 用一句話說明 Vite dev server 的 proxy 是在哪個(gè)進(jìn)程里生效的能正常返回說明 Key 和 Base URL 通了。接下來才是重點(diǎn)把下面三樣?xùn)|西一起貼給 Codex讓它逐條對(duì)照。第一樣你的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 實(shí)際監(jiān)聽的端口和根目錄。打開 VS Code 的 Five Server 輸出面板或看它啟動(dòng)時(shí)彈出的地址確認(rèn)到底是5555還是5500以及mockData是不是被當(dāng)成了根。如果 Five Server 的根就是mockData那target應(yīng)該寫成http://127.0.0.1:5555而不是帶/mockData。第三樣瀏覽器 Network 里/api/gdp.json的返回狀態(tài)碼和響應(yīng)體。是 404、200 但返回 HTML、還是 CORS 報(bào)錯(cuò)這三種對(duì)應(yīng)完全不同的修法。把這三樣貼給 Codex讓它輸出一份「端口 / 前綴 / rewrite 是否對(duì)得上」的對(duì)照結(jié)論。這一步才是真正消耗 Token 的地方也是它比你自己翻文檔快的原因。4. 可復(fù)制配置讓代理和 Five Server 對(duì)齊假設(shè) Codex 對(duì)照后確認(rèn) Five Server 實(shí)際跑在5555且mockData是它的根目錄那么target不該再帶/mockData否則轉(zhuǎn)發(fā)地址會(huì)變成http://127.0.0.1:5555/mockData/gdp.json而實(shí)際文件在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 的根是項(xiàng)目根目錄、mockData是子目錄那target才需要帶/mockDatatarget: http://127.0.0.1:5555/mockData,changeOrigin: true建議保留它會(huì)把轉(zhuǎn)發(fā)請(qǐng)求的 Host 頭改成目標(biāo)地址避免某些靜態(tài)服務(wù)因 Host 不匹配拒絕響應(yīng)。rewrite的正則/^\/api/只替換開頭的/api/api/gdp.json會(huì)變成/gdp.json這是對(duì)的但如果你寫成/\/api/g全局替換路徑里其他位置的api也會(huì)被誤傷。app.vue里的請(qǐng)求保持原樣即可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代理配置不會(huì)熱更新。5. 驗(yàn)證請(qǐng)求確認(rèn) gdp 數(shù)組真的渲染到頁面重啟 Vitenpm run dev打開瀏覽器按 F12 進(jìn) Network刷新頁面找/api/gdp.json這條請(qǐng)求。正常情況應(yīng)該是檢查項(xiàng)期望結(jié)果異常含義請(qǐng)求 URLhttp://localhost:5173/api/gdp.json說明請(qǐng)求發(fā)給了 Vite dev server狀態(tài)碼200404 說明 target/rewrite 錯(cuò)位響應(yīng)類型application/json返回text/html說明打到了 Vite 自身響應(yīng)體gdp 數(shù)組空數(shù)組說明文件路徑不對(duì)如果狀態(tài)碼 200 但響應(yīng)體是 Vite 的index.html說明代理沒命中請(qǐng)求被 Vite 的 SPA fallback 接走了通常是proxy鍵名或?qū)蛹?jí)寫錯(cuò)。如果 404把 Network 里的完整請(qǐng)求 URL 和vite.config.js一起再貼給 Codex讓它算一遍轉(zhuǎn)發(fā)后的實(shí)際地址。頁面?zhèn)却_認(rèn)gdp數(shù)組渲染出來v-ifloading消失、列表出現(xiàn)就說明整條鏈路通了。這一步的驗(yàn)證成本很低但能直接區(qū)分「代理沒通」和「數(shù)據(jù)拿到了但渲染有問題」。6. 本篇常見錯(cuò)排查端口對(duì)不上Five Server 默認(rèn)端口可能是5500你寫5555就永遠(yuǎn)連不上?？?Five Server 輸出面板的實(shí)際地址或直接在瀏覽器打開http://127.0.0.1:5555/gdp.json確認(rèn)能訪問再配代理。target 多帶或少帶/mockData這是最高頻的坑。判斷方法很簡單——瀏覽器直接訪問target rewrite 后的路徑能拿到 JSON 就說明 target 對(duì)了。比如 target 是http://127.0.0.1:5555/mockData那就訪問http://127.0.0.1:5555/mockData/gdp.json。改了配置沒重啟vite.config.js的server.proxy改動(dòng)必須重啟 dev server熱更新不生效。很多人改完刷新頁面還是 404就是沒重啟。rewrite 正則寫錯(cuò)/^\/api/只替換開頭/\/api/g會(huì)全局替換。如果你的接口路徑里還有別的api段全局替換會(huì)把它們也刪掉。請(qǐng)求發(fā)到了生產(chǎn)域名檢查fetch用的是相對(duì)路徑/api/gdp.json不是絕對(duì)路徑http://xxx/api/gdp.json否則代理不生效。CORS 報(bào)錯(cuò)如果 Five Server 沒開 CORS 且代理沒生效瀏覽器會(huì)攔。代理生效后請(qǐng)求是同源的不會(huì)再有 CORS 問題。把上面這些現(xiàn)象連同 Network 截圖一起丟給 Codex讓它按「端口 → target → rewrite → 重啟」的順序逐條排除比你自己反復(fù)換插件試要快得多。如果排查過程中需要確認(rèn)模型側(cè)的行為可以直接在模型對(duì)話里問https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite長期做前端編碼、想讓 Codex 持續(xù)參與這類配置排查的可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite接入文檔和 API Keys 管理分別在這里排障時(shí)按需取用https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_campaignrewrite最后補(bǔ)一個(gè)我踩過的坑Five Server 和 Live Server 同時(shí)裝著的時(shí)候右鍵菜單可能只顯示其中一個(gè)別以為是插件壞了去擴(kuò)展面板禁用另一個(gè)再右鍵。代理配通之后gdp.json換成任何 mock 文件都一樣能取這套排查路徑可以復(fù)用。