axios-moduleというのはNuxt-communityが提供してるプラグインです。オフィシャルのリストには入っていないのですが、Nuxtのドキュメントでもこちらを使用が推奨されており、事実上のオフィシャルプラグインだと思います。

環境


下記の環境で試してます。

  • nuxt: 2.8.1
  • @nuxtjs/axios: 5.5.4

とりあえず相対パス指定する


開発と本番でAPI(など)のURLを変えたいということはあると思います。

例えば/static/data/の下にusers.jsonというJSONを配置します。そしてvueコンポーネントでそいつを取得するとします。とりあえずasyncDataで相対パス指定しますよね。

1
2
3
4
5
6
export default {
async asyncData({ $axios }) {
const users = await $axios.$get(`/data/users.json`);
return { users: users };
},
};

で、これ一応ちゃんと動くんですよ。開発環境では。これを本番で動かすとエラー表示されるんですよ。

コンソール確認すると下記のような感じで本番環境にも関わらずlocalhost:3000をみにいってるんですよ。相対で指定しているので本番だとドメイン部はドメインに併せて変わるのかと思ったのですが、どうもそうではないようです。

1
2
3
Access to XMLHttpRequest at 'http://localhost:3000/data/users.json'
from origin 'https://example.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

開発と本番で異なるように設定する


で、これへの対応方法はOptionsに書いてあります。

You can pass options using module options or axios section in nuxt.config.js

Base URL which is used and prepended to make requests in server side.

とかいてあるので、nuxt.config.jsに下記のようにNODE_ENVbaseURLを変えればOKです。

1
2
3
4
5
6
7
export default {
...
axios: {
baseURL: process.env.NODE_ENV === "production" ? "https://example.com/" : "http://localhost:3000/"
},
...
}

おわり。