LaravelとVueの環境でaxiosでPOSTしたらエラーになった時の解決方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Laravel と Vue の環境で axios で POST したらエラーになった時の解決方法について、まとめました。
Laravel Framework 8.83.8
Vue 2.6状況をよく確認する
基本的に JavaScript 系のフレームワークにおいてエラーが発生したら、ブラウザのコンソールを確認してエラーの内容を確認します。
右クリック⇨検証⇨コンソールまたは、
Command ＋ Option ＋ I キーでコンソールを開くことができます。
エラーになったら、まずここを確認するのが良いでしょう（エラーにならなくても確認して損はないです）
404 エラーの場合
４０４エラーの場合、axios で POST しようとした URL が間違っています。
Laravel で作ったルーティングに対して POST するようにしてください。
そのためには、コンソールで出力されている URL をよく確認して、思っていた URL と同じかどうか確認してください。
以下は、解決のためのヒントになります。
api.php に書かれたルーティングには、prefix が入る
Laravel のルーティングは、web.php と api.php で指定することができますが、api.php でルーティングを書いた場合、
Route::post('post/store',~~~);とルーティングを書くと、実際は
/api/post/storeになります。これは、prefix で api が最初に着くように、ファイル自体に設定がされているからです。
なので、
axios.post('/api/post/store',obj).then()~~このように api から始まるように書かないと４０４になります。
ルーティングの URL の確認は、
php artisan route:listで確認しましょう。
axios の基準が違う
例えば、
axios.post("/post/store")と書いたとします。しかし、コンソールでよくみると、
http://127.0.0.1:8000/post/post/storeになっていたりします。
これは、axios を叩く現在の URL が「ttp://127.0.0.1:8000/post」という URL であるため相対パスで指定されてしまうことが原因です。
これは、axios の基準となる URL を設定することで解決します。
/resources/js/bootstrap.js
window.axios = require("axios")
//axios通信をするとき絶対パスを指定する
window.axios.defaults.baseURL = process.env.MIX_API_BASE_URL
//csrfを使える設定（今回の404とは関係ないけど一応）
window.axios.defaults.headers.common = {
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
}.env
MIX_API_BASE_URL=http://127.0.0.1:8000
#基準となるURLをenvで指定しておくenv を使って js ファイルの設定をした場合、
npm run watchを再起動して読み込ませましょう。
405 エラーの場合
GET と POST を間違えているかもしれません。
Laravel で作ったルーティングが間違っていたり、axios の方が間違っているか確認してみてください
Route::get(~~~) //⇦このGETとPOSTが間違っているかもaxios.get(~~~~) //⇦このGETとPOSTが間違っているかも419 エラーの場合
419 エラーはほとんどの場合、csrf の設定がうまくいっていません。
head タグの間に以下のような meta タグがあるか確認する
<head>
//色々書かれている
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>resources/js/bootstrap.js に設定が書かれているか確認する
window.axios = require("axios")
//csrfを使える設定
window.axios.defaults.headers.common = {
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
}これで POST で 419 エラーはでないはずです。
500 エラーの場合
サーバー、つまり Laravel 側のコードでエラーが発生しています。
サーバー側のエラーは、必ずログをみるようにしましょう。
storage/logs/laravel.log
ここにログがありますので、大抵の場合、ログの一番下が最新なので最新のログを見ると良いと思います。
ログは最新の時間のものの上から見る
ログは、一番上に重要な情報が書かれています。
とはいえ、ログファイルの一番上を見ると過去のはるか昔のエラーのログなので、最新のログの中の一番上から見ると良いと思います。
[previous exception] [object] (PDOException(code: 42S02): SQLSTATE[42S02]: Base table or view not found: 1146 Table 'project.users' doesn't exist at /project/vendor/doctrine/dbal/lib/Doctrine/DBAL/Driver/PDOConnection.php:67)
[stacktrace]
#0 /project/vendor/doctrine/dbal/lib/Doctrine/DBAL/Driver/PDOConnection.php(67): PDO->prepare('insert into `us...', Array)
#1 project/vendor/laravel/framework/src/Illuminate/Database/Connection.php(457): Doctrine\\DBAL\\Driver\\PDOConnection->prepare('insert into `us...')
#2....
#3...このような構成になっているので上の方に良い情報が載っています。
まとめ
以上です。
誰かの参考になればと思います。
感想・苦情は TwitterDM にご連絡ください。
それでは！
人気記事
