Nuxt3 使用 Nitro Proxy 解決跨域問題

前言

這一篇來記錄一下如何使用 Nitro Proxy 來解決 Nuxt3 的跨域問題。

Nitro Proxy

首先 Nuxt3 使用了一個全新的伺服器引擎，也就是 Nitro，而 Nitro 本身也提供了一個 Proxy 的功能，可以讓我們在開發時可以輕鬆的解決跨域問題。

剛好我最近在說鞥 Nitro Proxy 的時候發生了一點雷點，所以就順便記錄下來。

依照 Nitro 官方範例來講，只需要這樣寫即可：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devProxy: {
    '/proxy/test': 'http://localhost:3001',
    '/proxy/example': { target: 'https://example.com', changeOrigin: true }
  }
})

Note
Nitro 的 Proxy 本身是基於 node-http-proxy 的；其他參數選項你可以參考 node-http-proxy#options。

那麼假設我們遠端 API 是長這樣

https://api-example.com/api/v1/users/profile

你可能就會這樣寫：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devProxy: {
    '/api': {
      target: 'https://api-example.com',
      changeOrigin: true
    }
  }
})

（畢竟許多 Proxy 套件都是這樣寫）

這樣確實是會解決跨域的問題，但是這時候你會發生另一個問題…

也就是不管怎麼打都會變成這樣：

http://localhost:3000/v1/users/profile

這是我一直覺得滿奇怪的地方，所以我就檢查了一下 Proxy Request，發現 Nitro Proxy 會把 /api 給 rewrite 掉變成空白，所以你必須要這樣寫：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devProxy: {
    '/api': {
      target: 'https://api-example.com/v1',
      changeOrigin: true
    }
  }
})

這樣子在打出去時，才會是正確的網址。

Note
Nitro Proxy 是為了開發時的跨域問題所設計的，因此請勿在正式環境使用；Nitro Proxy 是針對前端打 API 時所使用的，因為後端（SSR）並不會有跨域問題。

那麼有些文章會推薦使用 routeRules，但我看官方文件目前是標注為「Experimental！（實驗）」，所以我就沒特別去使用它了。

Vite Proxy

如果你不想使用 Nitro 的 Proxy 而是想使用 Vite 的 Proxy 的話，依照剛剛的範例來講，你就要這樣寫：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    server: {
      proxy: {
        '/api': {
          target: 'https://api-example.com',
          changeOrigin: true
        }
      }
    }
  }
});

這邊是不用補上 /v1 的，因為 Vite 本身就不會 rewrite 掉 /api。

這邊也順便分享我先前寫過的 Vite 中使用 Proxy 解決 CORS 問題，基本上設定都是相同的，你是可以直接參考並使用。