Nuxt3 使用 Nitro Proxy 解決跨域問題

Nuxt 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 是長這樣

1	`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 套件都是這樣寫）

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

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

1	`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 問題，基本上設定都是相同的，你是可以直接參考並使用。

Nuxt3 使用 Nitro Proxy 解決跨域問題

前言

Nitro Proxy

Vite Proxy

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

Nitro Proxy

Vite Proxy

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

Nuxt3 綁定表單後無限觸發 API

初始化 Nuxt3 專案時出現 Issues with peer dependencies found 警告

還原專案噴 Cannot find module @rollup/rollup-darwin-arm64 錯誤

Nuxt 3.8.0 useFetch Error Cache 的問題

分享這篇文章

留言