rkyurit.dev

Nuxt を SPA フロントエンドとして利用し、バックエンドは API サーバーとして分離する構成でローカル環境においてCORSが発生する場合

Nuxt を SPA フロントエンドとして利用し、バックエンド API を別サーバーで起動している場合、ローカル環境では CORS ポリシーでエラー が発生することがある。
必要があれば API 側に CORS を許容する実装を入れるべきだが、本番環境では同じオリジンで運用している場合は、開発環境でのみ有効な設定を入れたい。

この場合、Nuxt 側で Nitro の devProxy を利用し、Nuxt dev server への /api リクエストをバックエンド API サーバーへプロキシすることで回避できる。 https://nitro.build/config#devproxy

例えば、以下のような構成の場合。

  • Nuxt dev server: http://localhost:3000
  • Backend API server: http://localhost:8080

ブラウザから http://localhost:8080 に直接リクエストすると、オリジンが異なるため CORS の対象になる。

この場合、 nuxt.config.ts に Nitro の devProxy を入れることで回避できる。

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    devProxy: {
      "/api": "http://localhost:8080/api",
    },
  },
});

useFetchで以下のようにAPI呼び出しを実装すると、devProxyで設定したURLにリクエストが転送される。

<script setup>
const { data } = await useFetch("/api/health");
</script>

ただし、あくまでリクエスト自体は Nuxt の dev server に向けて行われるため、ブラウザのデベロッパーツール上は http://localhost:3000/api/health へのリクエストになるため注意が必要。

参考