Nuxt3 代理 API 請求 示範

Nuxt3 的伺服器引擎是使用 Nitro，Nitro 有內建的代理服務，要使用很方便，只要在 nuxt.config.ts 加上下面這幾行即可:

    
export default defineNuxtConfig({
    nitro: {
        devProxy: {
            "/api": {
                target: "http://localhost:8888/api", // 代理的目標地址
                changeOrigin: true, 
            }
        }
    }
})
    

上面的設定會把所有 /api 開頭的請求轉送到 http://localhost:8888/api

呼叫 API 示範:

    
const url = '/api/users/1';
const {data, pending, error, refresh} = await useFetch(url, {
  method: 'GET',
});
    

實際請求的連結: http://localhost:8888/api/users/1

延伸閱讀： 在 Nuxt3 中呼叫 API 示範

不過需要注意的是上面的是 devProxy ，也就是開發時的代理，在正式環境中是不會運作的。

Nitro 最近推出了一個實驗性功能，可以使用 routeRules 代理，依照官方的說法是只要依照下面的設定即可:

    
export default defineNuxtConfig({
    nitro: {
        routeRules: {
            '/api': {
                proxy: 'http://localhost:8888'
            },
        },
    }
})
    

還有 vite 的代理方式:

    
export default defineNuxtConfig({
    vite: {
        server: {
            proxy: {
                '/api': {
                    target: 'http://localhost:8888',
                    changeOrigin: true,
                },
            },
        },
    },
})
    

不過上面兩種方式筆者測試了大概 20 幾輪，爬了一堆文章，都沒有辦法成功，最後是透過第三方套件，如果有成功的高手還請指點！

參考資料：
GitHub nuxt/nuxt Discussions - How to proxy api requests? #15907
Nitro - config #devProxy
Nuxt - Server Engine
Stack Overflow - How do I set proxy in Nuxt3?