Nuxt.js Homesteadにhttpsでリクエストしてレスポンスを取得する

NuxtプロジェクトからHomesteadにhttpsでリクエストしたときに発生したエラーの対応方法をまとめました。

必要な手順は以下の2つです。

1. Homestead
2. 自己証明書を取得する
3. Nuxt.js
4. 必要なモジュールをインストール
5. 環境変数を設定して自己証明書を読み込む

Homestead

Homesteadにログインして自己証明書を取得します。

vagrant ssh
cp /etc/nginx/ssl/ca.homestead.homestead.crt /home/vagrant/code

“信頼されたルート証明機関” の証明書として ca.homestead.homestead.crt をインストールしてください。

参考: https://blog.hrendoh.com/setup-laravel-homestead-2019/#i-3

Nuxt.js

この状態でNuxt.jsからAPIサーバーにリクエストを送ってみます。

export default {
:
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'https://homestead.test'
  }
:
}

export default {
  async asyncData(context) {
    const test = await context.app.$axios.$get('/test')
    return {}
  },
}

以下のコマンドを実行して http://localhost:3000 にアクセス

npm run dev

すると以下のエラーが発生します。

NuxtServerError unable to verify the first certificate

このエラーを回避するため自己証明書をNuxt.jsで読み込みます。

必要なモジュールをインストール

Node.jsの環境変数 NODE_EXTRA_CA_CERTS に自己証明書を設定します。Windows環境で作業しているのでcross-envをインストールします。

npm i cross-env

環境変数を設定

自己証明書は ./assets/crt/ に配置しました。

:
  "scripts": {
    "dev": "cross-env NODE_EXTRA_CA_CERTS=./assets/crt/ca.homestead.homestead.crt nuxt",

以上の対応で先程のNuxtServerErrorは発生しなくなります。