Next.js Larvelを使用してSPAを開発しています。
LaravelはAPIサーバーとしてREST APIでの値受け渡しをしております。
GETでの値取得はできましたが、POST、PUT、DELETEといった処理がうまく動作しません。
Laraveはのバージョンは8.1を使用しています。
また、ログイン認証関連でsanctumを使用しました。
この辺も影響しているのかな?とも思います。
ご教授いただけますと幸いです。
Next側
front/pages/top.js
const Axios = axios.create({ xsrfHeaderName: 'X-CSRF-Token', withCredentials: true, headers: { 'content-type': 'application/json' } }) await Axios .put('http://127.0.0.1:8000/api/test/000001', data) .then((res) => { console.log(res.data) }) .finally(()=>{ setRegister(false) setOpen(false) })
Laravel側
routes/api.php
Route::apiResource('test', TestController::class);
controllers/TestController.php
public function update(EmployeeRequest $request, $id) { // 更新 $test = Test::find($id); $test->update($request->all()); return new TestResource($test); }
php artisan route:list | PUT|PATCH | api/test/{test} | test.update | App\Http\Controllers\TestController@update | api
kernel.php
'api' => [ \App\Http\Middleware\VerifyCsrfToken::class, ⇦追加 ※追加する前は419エラーが出ていた(内容:csrf token mismatch) \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, ⇦sanctum使用時に追加 'throttle:60,1', \Illuminate\Routing\Middleware\SubstituteBindings::class, ],
Controllers/Auth/Logincontroller.php
public function login(Request $request): JsonResponse { $credentials = $request->validate([ $this->username() => 'required', 'password' => 'required', ]); $credentials = $request->only($this->username(), 'password'); if (Auth::attempt($credentials)) { $request->session()->regenerate(); return response()->json(Auth::user()); } throw new Exception('ログインに失敗しました。再度お試しください'); }
当初のエラー
local.ERROR: Session store not set on request. {"exception":"[object] (RuntimeException(code: 0): Session store not set on request
現在のエラー(ブラウザのコンソール)
{message: "CSRF token mismatch."} message: "CSRF token mismatch."
記事
- sanctum導入時
https://yutaro-blog.net/2021/09/07/nextjs-laravel-sanctum-spa/
- 419のtoken mismatch が出た時
LoginController.php
public function login(Request $request): JsonResponse { $credentials = $request->validate([ 'id => 'required', 'password' => 'required', ]); $credentials = $request->only('EM_FIKSID', 'password'); if (Auth::attempt($credentials)) { $request->session()->regenerate(); return response()->json(Auth::user()); } throw new Exception('ログインに失敗しました。再度お試しください'); }
pages/login.js
const handleClick = () => { const Data = { params: { 'id': id, 'password': password }} axios // CSRF保護の初期化 .get('http://127.0.0.1:8000/sanctum/csrf-cookie') .then((res) => { // ログイン処理 console.log(res) axios .post( 'http://127.0.0.1:8000/login', Data, ) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) }) }) }
まだ回答がついていません
会員登録して回答してみよう