実現したいこと
- vueのコンポーネントで、axiosを使いフロントからバックにデータを渡したい
前提
- 勉強の一環で簡単なツイッター風アプリを作っています。
- 各ツイートにvueのコンポーネントで作った「いいねボタン」をつけています。
- 各ツイートの「いいねボタン」が押されたらその【ツイートid】と【toggleしたtrue,false】をDBに登録したい。
- laravel10
- MySQL
- axiosライブラリ、インストール済
発生している問題・エラーメッセージ
「いいねする」「いいね解除する」とボタンを押す度に、デベロッパーツールのコンソールに表示されるエラー
POST http://localhost:8001/api/timeline 404 (Not Found)
AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
該当のソースコード
「いいねボタン」のコンポーネント内、該当部分抜粋
import axios from 'axios'; const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content; axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken; const performPostRequest = async () => { try{ const response = await axios.post('/api/timeline',{ liked:liked.value, tweetId:tweetId.value, }) }catch(error){ console.error(error); } }
ルートのroutes/api.php
use App\Http\Controllers\Api\IineregisterController; Route::prefix('api')->group(function () { Route::post('/timeline', [IineregisterController::class, 'like']); });
該当のIineregisterContoroller
class IineregisterController extends Controller { public function like(Request $request) { $user_id = auth()->user()->id; $liked = $request->input('liked'); $tweetId = $request->input('tweetId'); if($liked){ $iine = new Iine(); $iine->user_id = $user_id; $iine->tweet_id = $tweetId; $iine->save(); }else{ Iine::where('user_id' , $user_id)->where('tweet_id' , $tweetId)->delete(); } } }
試したこと
ステータスコード404 = サーバーが要求されたリソースを見つけることができなかったということで、
- APIエンドポイントである'/api/timeline'の綴り間違い確認
- ルートキャッシュのクリア
補足情報(FW/ツールのバージョンなど)
実際、DBへの登録も上手くいっていませんが、まずは404エラーをどうにかしないといけないかと思い色々試行錯誤しましたが、全く解決せず、20時間このエラーと向き合っています(泣)もしどなたかおわかりになる方がいましたら。。。と思い質問させていただきました。
初学者の為、足りない部分ありましたら申し訳ありません。

0 コメント