質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Next.js(axios)とlaravelを使ってhttp通信がしたい(POST、PUT、DELETE)

tkoide1213
tkoide1213

総合スコア7

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

3248閲覧

投稿2022/03/09 03:14

編集2022/03/13 12:56

Next.js Larvelを使用してSPAを開発しています。
LaravelはAPIサーバーとしてREST APIでの値受け渡しをしております。
GETでの値取得はできましたが、POST、PUT、DELETEといった処理がうまく動作しません。
Laraveはのバージョンは8.1を使用しています。
また、ログイン認証関連でsanctumを使用しました。
この辺も影響しているのかな?とも思います。
ご教授いただけますと幸いです。

Next側 

front/pages/top.js

1const Axios = axios.create({ 2 xsrfHeaderName: 'X-CSRF-Token', 3 withCredentials: true, 4 headers: { 5 'content-type': 'application/json' 6 } 7}) 8 await Axios 9 .put('http://127.0.0.1:8000/api/test/000001', data) 10 .then((res) => { 11 console.log(res.data) 12 }) 13 .finally(()=>{ 14 setRegister(false) 15 setOpen(false) 16 }) 17

Laravel側

routes/api.php

1Route::apiResource('test', TestController::class); 2

controllers/TestController.php

1public function update(EmployeeRequest $request, $id) 2 { 3 // 更新 4 $test = Test::find($id); 5 $test->update($request->all()); 6 return new TestResource($test); 7 } 8
php artisan route:list | PUT|PATCH | api/test/{test} | test.update | App\Http\Controllers\TestController@update | api

kernel.php

1'api' => [ 2 \App\Http\Middleware\VerifyCsrfToken::class, ⇦追加 ※追加する前は419エラーが出ていた(内容:csrf token mismatch) 3 \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, ⇦sanctum使用時に追加 4 'throttle:60,1', 5 \Illuminate\Routing\Middleware\SubstituteBindings::class, 6 ],

Controllers/Auth/Logincontroller.php

1 public function login(Request $request): JsonResponse 2 { 3 $credentials = $request->validate([ 4 $this->username() => 'required', 5 'password' => 'required', 6 ]); 7 8 $credentials = $request->only($this->username(), 'password'); 9 10 if (Auth::attempt($credentials)) { 11 $request->session()->regenerate(); 12 return response()->json(Auth::user()); 13 } 14 15 throw new Exception('ログインに失敗しました。再度お試しください'); 16 }

当初のエラー

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 が出た時

https://stackoverflow.com/questions/58910214/react-to-laravel-csrf-token-mismatch-error-not-working-even-after-trying-lot

LoginController.php

1public function login(Request $request): JsonResponse 2 { 3 $credentials = $request->validate([ 4 'id => 'required', 5 'password' => 'required', 6 ]); 7 8 $credentials = $request->only('EM_FIKSID', 'password'); 9 10 if (Auth::attempt($credentials)) { 11 $request->session()->regenerate(); 12 return response()->json(Auth::user()); 13 } 14 15 throw new Exception('ログインに失敗しました。再度お試しください'); 16 }

pages/login.js

1const handleClick = () => { 2 const Data = { params: { 'id': id, 'password': password }} 3 axios 4 // CSRF保護の初期化 5 .get('http://127.0.0.1:8000/sanctum/csrf-cookie') 6 .then((res) => { 7     // ログイン処理 8 console.log(res) 9 axios 10 .post( 11 'http://127.0.0.1:8000/login', 12 Data, 13 ) 14 .then((res) => { 15 console.log(res) 16 }) 17 .catch((err) => { 18 console.log(err) 19 }) 20 }) 21 }

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

以下の回答が参考になるのではないでしょうか?
https://stackoverflow.com/questions/66048023/laravel-8-sanctum-spa-auth-session-store-not-set-on-request


追記
apiのミドルウェアグループに下記のクラスを追加してみてはどうですか?
自分もsanctumを使っていたのですが、下記のクラスたちをapiのミドルウェアグループに追加していました。

php

1 \App\Http\Middleware\EncryptCookies::class, 2 \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, 3 \Illuminate\Session\Middleware\StartSession::class, 4 \Illuminate\View\Middleware\ShareErrorsFromSession::class,

さらに追記

下記の記事の認証のところが参考になると思います。
https://www.google.com/amp/s/webxreal.com/laravel-sanctum-spa/%3Famp%3D1
また、↓の記事もわかりやすいです。
https://qiita.com/ucan-lab/items/3e7045e49658763a9566


下のやりかたでいけると思います。chromeの開発者モードにしてcookieの中にXSRF-TOKENに保存されているか確認できます

javascript

1Axios.get('/sanctum/csrf-cookie').then(response => { 2 await Axios 3 .put('http://127.0.0.1:8000/api/test/000001', data) 4 .then((res) => { 5 console.log(res.data) 6 }) 7 .finally(()=>{ 8 setRegister(false) 9 setOpen(false) 10 }) 11});

投稿2022/03/09 08:06

編集2022/03/11 14:06
mineralwater

総合スコア289

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tkoide1213

2022/03/09 09:02

ご回答ありがとうございます。 記事の通り \Illuminate\Session\Middleware\StartSession::class を追加しましたがだめでした。 middlewareGroupsのapiに追加した \App\Http\Middleware\VerifyCsrfToken::class, の追加も間違っているようなので削除しました。 どうやら419 token mismatchが解消されていないのがだめみたいです。 api.php からweb.phpに切り替えたらうまくいくみたいな記事もありましたがだめでした、、、 サーバー側とクライアント側のトークンを一致できません、、、
tkoide1213

2022/03/09 12:46

追記ありがとうございます。 追加してみましたがだめでした、、、
mineralwater

2022/03/11 10:51

フロントエンドのCSRF tokenを取得する処理はどこでしていますか?
tkoide1213

2022/03/11 12:49 編集

フロントエンド側での処理していないかもしれません。。。 const axiosPost = axios.create({ xsrfHeaderName: 'X-CSRF-Token', withCredentials: true }) この処理で全て完結すると思い込んでました。 フロンエンドで取得するcsrf tokenをバックエンドで発行&渡す処理が必要ということであっていますか??
mineralwater

2022/03/11 13:53

発行&渡す処理が必要だと思います。具体的な仕方は回答に追記したurlをご覧ください。
tkoide1213

2022/03/13 12:55 編集

ご回答ありがとうございます! 上記試してみたのですが、419エラーが解消できませんでした。 開発者モードで確認したところ、1行目のGET部分ではXSRF-TOKENが保存できていたのですが、PUT部分ではXSRF-TOKENが保存されていませんでした。 これが、原因でエラーがおこっていたみたいです。。。 今回とは別でloginの処理をしている部分があるのですが、ここでも同様にPOSTをすると419がでていたのでGETに切り替えました。GETにするとXSRF-TOKENは保存できています。 認証用のテーブルに独自で使用したテーブルを使用しているのですが、これが影響しているのでしょうか、、、 上記にソースを追記しました。ご確認いただけますと幸いです。
mineralwater

2022/03/14 08:38

うまくいったようで何よりです。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。