😅

［react×laravel環境］ルーティングとAPIで躓いた話

2024/10/12に公開

JavaScript

やりたかったこと

画面遷移した際にaxiosでDBに保存されているTodoリストを取得してtodosにセットして表示させる処理

ShowTodoList

const response = await axios.get("/api/todo");
                setTodos(response.data);

うまくいかず

console.log(response.data);

中身を見てみたらhtmlが返されていたので、ChatGPT先生に質問しました
先生曰くapiとルーティングに優先順番があることがわかり
laravelのweb.phpのフロントエンドのすべてのリクエストをキャッチするルートの部分が
先になっていてhtmlが返されていました。

web.php

// Todo APIエンドポイント
Route::post('/api/todo', [TodoController::class, 'setTodo']);
Route::get('/api/todo', [TodoController::class, 'index']);

// フロントエンドのすべてのリクエストをキャッチするルート
Route::get('{any}', function () {
    return view('app');
})->where('any','.*');

逆にすることでjson形式のデータがしっかり帰ってくるようになりました。
めでたしめでたし

やりたかったこと

Discussion