Nuxt 2 解決 CORS：用 @nuxtjs/proxy 把 Nuxt 當成代理伺服器

串接後端 API 時遇到 CORS 問題。

什麼是 CORS

CORS（Cross-Origin Resource Sharing，跨域資源共享）是瀏覽器基於安全性考量的限制：載入其他網域的資源時，除非對方伺服器明確用回應標頭表示允許，不然瀏覽器會擋下這個請求。Firefox 跟 Chrome 對這個錯誤都有各自的提示訊息，但本質上是同一件事——後端沒有回傳允許跨域的標頭。

解法：讓 Nuxt 自己的伺服器當代理

瀏覽器的同源限制只針對「瀏覽器直接發出的跨網域請求」，伺服器對伺服器的請求不受這個限制。 解法是讓瀏覽器只跟「提供網頁的那台伺服器」（也就是 Nuxt 自己）要資料，再由 Nuxt 的伺服器去跟真正的後端 API 要資料，轉手一次繞過瀏覽器端的限制。

安裝

npm install @nuxtjs/proxy

nuxt.config.js 設定：

export default {
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/api/': {
      target: 'https://backend.example.com',
      pathRewrite: { '^/api/': '' },
    },
  },
};

設定完成後，前端請求打 /api/posts，實際上會被 Nuxt 的伺服器轉發到 https://backend.example.com/posts，瀏覽器全程只跟同一個網域（Nuxt 自己）溝通，不會觸發 CORS 檢查。

現在還適用嗎

@nuxtjs/proxy 是 Nuxt 2 專屬的模組，Nuxt 3 之後的架構（Nitro）本身就是一個功能完整的伺服器，不需要額外裝模組來做代理，直接用 Nitro 的 server routes 就能達成同樣的效果，而且能力更完整（能順便做金鑰隱藏、回應快取這些事）。整理在《Nuxt 3 用 server routes 做代理與轉發》。

參考資料

• MDN：CORS
• @nuxtjs/proxy