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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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ライブラリです。

Q&A

解決済

1回答

6473閲覧

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

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ライブラリです。

0グッド

0クリップ

投稿2022/03/09 03:14

編集2022/03/14 17:38

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 }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問