NUXT.JSでHerokuにデプロイした時データが取得できない問題

NUXTのaxios-moduleでBaseURLは設定が何もないとhttp://localhost:3000になってHeroku上で上手く動いてくれなくなります。

こちらの部分をhttp://XXXXXXXXXXXXXXXXXX.herokuapp.com/apiとしたい。

window.location.originを付与して、GETできるように致します。　

this.$axios.$get(window.location.origin + "/api/XXXX");

※ @nuxtjs/axiosでbaseURL設定するには、nuxt.config.jsに下記のように書き込みます。

modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    baseURL: 'http://localhost:8000',
  },

このように書き変わります。

HerokuのBASE_URLの設定を確認して、

nuxt.config.jsの設定を書き換えでBASE_URLに値(URL)を渡したら、

nuxt.config.js

 modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    baseURL: process.env.BASE_URL
  },

プロダクション環境で動作する設定を下記コマンドで実行し、

heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

ルートディレクトリにProcfileを追加しweb: nuxt startを書き込む。

Nuxt.jsアプリをHerokuでプッシュしてデプロイすると。

git push heroku main

切り替わり、無事データが送られるようになったようです。