【Nuxt3】APIコール時にエラーとなった事例と対応策

はじめに

Nuxt3で新規開発をしていた際、ローカル環境では問題ないが、STG環境でのAPIコール時にエラーとなる問題が発生しました。備忘録として対応内容を残しておきます。

エラーの内容

開発者ツールで通信周りを確認したところ、以下のようなリクエストで403エラーが発生していることがわかりました。
http://host名/api/create
本番環境・STG環境では、特定のパス（例として/hoge）配下のみアクセスを許可しており、上記のようなリクエストの場合、アクセスが拒否されます。

対策

コールされるAPIがhttp://host名/hoge/api/createのように、アクセス許可されているパスである必要があるため、nuxt.config.tsを見直し、以下のようにbaseURLを指定することで解決することができました。

export default defineNuxtConfig({
  app: {
    baseURL: '/hoge/', // baseURLを指定
    buildAssetsDir: '/_nuxt/', // 生成物は/hoge/_nuxt/に配置される
  },
})

※ baseURLを追加すると、画面や画像ファイルなど、全体のディレクトリ構成も変更が必要なので注意してください。