VueでWEBアプリ(15)

更新日：2021年6月16日

前回作成した投稿フォームについてコードを公開していましたが、POSTのURLがそのまんま公開されてる状態だったので、.envファイルを利用し公開せずに済む形に修正しました。

この記事ではその手順と403エラーで詰まったところについて書いていきます。

参考ページ

以下のコマンドでdotenvモジュールをインストール

npm install dotenv --save

プロジェクト直下に.envファイルを作成。

.envファイル内で変数設定。

VUE_APP_POST_URL=POST用URL

vue.config.jsに以下を追加。（module.exports の上に書きました。）

require('dotenv').config();

Form.vueのPOST部分を以下のように修正する。

await axios.post(process.env.VUE_APP_POST_URL, params)

これで.gitignoreに.envを追加し追跡対象から外せば、URLが書いてあるファイルを公開せずに済みます。

上記の手順で登録処理を通してみたところ、なぜかprocess.env.VUE_APP_POST_URLの箇所（つまりPOSTのURL）で403エラーが出ました。

.envにあるURLを直接書けば問題なく動くことから、URLが間違っているということはないはず、と思っていたのですが…

どうやら.envでURLをシングルクォーテーション＋セミコロンで書いていたせいで、シングルクォーテーションが認識されずURLにセミコロンがくっついた状態になっており、間違ったURLになっていたようです。

URLがちゃんと変数に入っているか確認用のconsole.log()をsubmitで通るようにしていたのですが、セミコロン付きでログが表示されていたのに気づきませんでした…。

VUE_APP_POST_URL='https://xxxxxxxxx';　//こちらが403が出た時

VUE_APP_POST_URL=https://xxxxxxxxx　// こちらが403が出なかった時

この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。

最新記事