axiosを使ったフロントからバックへのデータ送信について

実現したいこと

  • 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 コメント