Laravel

LaravelとVueの環境でaxiosでPOSTしたらエラーになった時の解決方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。

⇨ Laravel 記事の目次はこちら

Laravel と Vue の環境で axios で POST したらエラーになった時の解決方法について、まとめました。

Laravel Framework 8.83.8
Vue 2.6

状況をよく確認する

基本的に JavaScript 系のフレームワークにおいてエラーが発生したら、ブラウザのコンソールを確認してエラーの内容を確認します。

右クリック⇨検証⇨コンソール

または、

Command + Option + I キー

でコンソールを開くことができます。

エラーになったら、まずここを確認するのが良いでしょう(エラーにならなくても確認して損はないです)

404 エラーの場合

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 から始まるように書かないと404になります。

ルーティングの 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 にご連絡ください。

それでは!

人気記事

PHP7.4 + Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する