タイトルの通りなのですが、axiosのpost通信の際にコケてしまうという事象にハマっています。
(get通信は正常にできています。)
フロントはtypescript、バックエンドはlaravel(9.2.0)を使用しています(laravel-apiを使っています)。
ソース、事象、試したことは以下の通りです。
■ソース
・クライアント
useMemos.ts
1 const insertMemo = (content: string) => { 2 3 const data = { 4 content, 5 user_id: '1' 6 }; 7 // const axiosPost = axios.create({ 8 // xsrfHeaderName: 'X-CSRF-Token', 9 // withCredentials: true 10 // }) 11 12 axios.post('/api/createMemo',data) 13 // success 14 .then((res) => { 15 console.log(res.data.data); 16 }) 17 // fail 18 .catch((e) => { 19 console.error(e); 20 }); 21 };
・バックエンド
api.php
1Route::group(['middleware' => 'api'], function () { 2 Route::get('/getmemos', [MemoController::class, 'getMemos']); 3 Route::get('/gettags', [TagController::class, 'getTags']); 4 Route::post('/createMemo', [MemoController::class, 'createMemo']); 5});
MemoController.php
1class MemoController extends Controller 2{ 3 4 // get 5 public function getMemos() 6 { 7 return MemoResource::collection(Memo::all()); 8 } 9 10 // insert 11 public function createMemo(Request $request) 12 { 13 $posts = $request->all(); 14 dd($posts); 15 16 return $posts; 17 } 18}
■発生事象
ブラウザにて以下のエラーが発生する。
POST http://127.0.0.1:8081/api/createMemo 500 (Internal Server Error) Error: Request failed with status code 500 at createError (app.js?id=a1960a1dc783d9b941e643b394917c0e:37732:15) at settle (app.js?id=a1960a1dc783d9b941e643b394917c0e:38024:12) at XMLHttpRequest.onloadend (app.js?id=a1960a1dc783d9b941e643b394917c0e:37053:7)
■試したこと
・post通信の際にCSRFが必要?とのことで、useMemos.tsでコメントアウトされている箇所の変数からpostを実行してみたがエラー変わらず。
・ブラウザで直接「http://127.0.0.1:8081/api/createMemo」を実行したところ、以下のエラー発生。
(ブラウザからcreateMemoが呼べてない?)
app.js?id=4d8eb6a7829cf579c571425d218368d7:74224 No routes matched location "/api/createMemo"
larave及びtypescriptに触れるのは初めてで、初歩的な質問かとは思いますが、ご確認よろしくおねがいします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。