HTTP419: 認証がタイムアウト エラー

Question

お世話になってます。
今、モーダルウィンドウからajax通信にてPOST送信したものを
LaravelのRouteでルーチングしてDBにinsertさせたいんですが、
以下のエラーが出て少し困惑しています。
CSRF関連からのエラーであることは、わかるのですが対処しきれない感じです。
お分かりの方おられましたら、ご教示下さい。

エラー名
HTTP419: 認証がタイムアウトしました - 以前に有効だった認証の有効期限が切れました。
(XHR)POST - http://localhost:8000/mailbox

●Form側

<form id="regist_Form">

	 {{ csrf_field() }}

         <div class="form-group">
            <label for="username" class="control-label">ユーザー名</label>
            <input type="text" class="form-control" id="username" name="username" value="{{ old('username') }}" placeholder="[e-mail]" required/>
            @if($errors->has('username'))<span class="text-danger">{{ $errors->first('username')}}</span> @endif
         </div>

	 <div class="form-group">
            <label for="mail" class="control-label">希望アドレス</label>
            <input type="text" class="form-control" id="mail" name="mail" value="{{ old('mail')}}" required title="この項目は必須です。">@gay86.com
            @if($errors->has('mail'))<span class="text-danger">{{ $errors->first('mail')}}</span> @endif
	</div>
           
          <div class="form-group">
            <label for="password" class="control-label">パスワード(半角英数)</label>            
	    <input type="password" class="form-control" id="password" name="password" value="{{ old('password')}}" required title="この項目は必須です。">
	  </div>

          <div class="form-group">
            <label for="password_2" class="control-label">パスワード(確認)</label>            
	    <input type="password" class="form-control" id="password_2" name="password_2" value="{{ old('password_2')}}" required title="この項目は必須です。">
	  </div>
	   
          <div class="form-group">
            <label for="to-mail" class="control-label">連絡用アドレス</label>
            <input type="mail" class="form-control" id="Nitta_mail" name="Nitta_mail" value="{{ old('Nitta_mail')}}" required title="この項目は必須です。">
	  </div>
	　　
　　　　　 <div id="result"></div>

          <input type="button" id="gay_resgister" class="btn btn-primary btn-block" value="登録">
          
 	</form>

●JS側

$("#gay_resgister").click(function () {         
          var pass = $('#password').val();
          var pass_2 = $('#password_2').val();
          console.log(pass);⇒入力データが取得できない
          console.log(pass_2);⇒入力データが取得できる

          var xhr = new XMLHttpRequest();
          xhr.open('post','./mailbox');
          xhr.send();
});

ルーチング

Route::post('mailbox', 'GayregistController@Gay_register');

●試したこと
csrf関連のエラーから以下の2つを実行。

①
Form内に以下のmetaタグを挿入
{{ csrf_field() }}を外して
<meta name="csrf-token" content="{{ csrf_token() }}">

JS側
var xhr = new XMLHttpRequest();
xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
xhr.open('post','./mailbox');
xhr.send();

error名
⇒InvalidStateError

②
Form内に以下のmetaタグを挿入
{{ csrf_field() }}を外して
<meta name="csrf-token" content="{{ csrf_token() }}">

JS側
var xhr = new XMLHttpRequest();
xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
xhr.setRequestHeader( "X-From", location.href );
xhr.open('post','./mailbox');
xhr.send();

error名
⇒InvalidStateError

尚、{{ csrf_field() }}が有無に関係なく同じエラーが出ます。

Comments

[sola-msr]

csrf-tokenはPOSTされてるのはブラウザのDevツール等で確認しましたか？

[Nitta]

返信ありがとうございます。
cookieのXSRF-TOKENに値が入っているので、POST送信はされているものと思います。

[Nitta]

基礎からしっかりやりたいと思う。
この質問を最後に暫く書き込むのを辞めたいと思うので、
この質問だけは回答してもらえないでしょうか？

[sola-msr]

> cookieのXSRF-TOKENに値が入っているので、POST送信はされているものと思います。
なんでそう思ったのかわかりませんが、cookieのXSRF-TOKENに値が入っているからといってサーバー側にPOSTされてるとは限りません。ブラウザのDevツールかサーバー側でPOSTパラメータの確認をしてください。

[Nitta]

$_POST["mail"]や$_POST["passeord_2"]などの入力値は、きっちり値取得できinsertもできています。
しかし、何故か$_POST["username"]などには値を入力してるのに、空です。

Answer 1

$_POST["mail"]や$_POST["passeord_2"]などの入力値は、きっちり値取得できinsertもできています。

しかし、何故か$_POST["username"]などには値を入力してるのに、空です。

とりあえずフロント側でPOSTされた値の確認とサーバー側で（普通のREST構造ならController）送信した値が来ているかの確認（Laravelだとdd()とかvar_dump()とか）をしてください。まずは問題の切り分けを

あとこういうわからない状態に陥った場合は最小限の構成にして徐々に元に戻していくのが解決が早いです（usernameだけの項目がある状態にしてみたりしてとか）

答えられるのはこれくらいかなと

Comments

[Nitta]

無事この件、バリデーション及びinsertもできるようになりました。
少し余談ですが、基礎の再習得の場合、progateレベルをマスターし直せば
良いのですかね？意見、聞かせて下さい。

[sola-msr]

正直progateレベルをマスターしても、ですがあれレベルできないとどうしょうもないと個人的に思うのでまずはprogateレベルはできるようにしたほうがいいと思います。あとはそれをもとに色々やってみてトライ・アンド・エラーを繰り返して行けばそれなりに色々理解できるようになるのかなと

[Nitta]

実は過去にprogateはJSとPHP全部やったりもしてて、それでこういう状態なんですよね？
何かいい策はないでしょうか？

[m.ts10806]

sola-msrさん
よく日本人は間違えますが、trial and error です。
https://www.quicktranslate.com/blog/2017/09/%E3%80%8C%E3%83%88%E3%83%A9%E3%82%A4%E3%83%BB%E3%82%A2%E3%83%B3%E3%83%89%E3%83%BB%E3%82%A8%E3%83%A9%E3%83%BC%E3%80%8D%E3%81%AF%E9%96%93%E9%81%95%E3%81%84%EF%BC%81-%E4%BC%9A%E8%AD%B0%E3%81%A7%E4%BD%BF/

Nittaさん
私言いませんでしたっけ。基礎から学びなおしてって。
色んなところで公式ドキュメント活用できるようになりましょうって言ってます。
「～で習ったから大丈夫」なんてどこにも保障ないですし、
現実見ればどこで習ったところで軸が出来てなければどの言語でも同じでしょう。
誰に聴いたところでおおよそ同じ返答があるはずなので、自身に都合のいい魔法の言葉が返ってくる希望は捨ててください。

[sola-msr]

m.ts10806さん
お、まじすかｗグーグル先生のサジェストででたんでそれで入力しちゃいました。おぼえとこ

Nittaさん
progateクリアできた＝理解した にはならないでしょう
まずは自分が何を理解していないのかを理解することから始めてみては？（実のところそれをするには実際に手を動かしていくのが早いのですが）

[Nitta]

m.ts10806,sola-msr様

おはようございます。
phpも奥が深いのでなかなかですが、公式ドキュメントを良く読みこなしたり
何がわかってないのか弱いのか、その辺を精査し直して出直したいと思います。
今回は習得方法など色々ありがとうございました

[sola-msr]

頑張ってくださいー

Answer 2

/mailbox に対して何一つ情報送信してないみたいですけど(send()になにもセットしてない)。

Comments

[Nitta]

返信ありがとうございます。
url=>http://localhost:8000/mailbox
send(pass_2)
をセットしてみましたが、結果が変わりませんでした。
因みにmethod=post url='./mailbox'でajax通信した場合は
Laravelのコントローラーには引き継がれると解釈して
良いのでしょうか？

[m.ts10806]

そんな枝葉だけの情報提示されても誰も分かりません。
それに「CSRF関連からのエラーであることは、わかる」と自分で発言しながらなぜCSRFを送らないのでしょうか。
あれはLaravelでフォーム送信するための単なるおまじないじゃないですよ？
素のPHP、、、というかWebに関する根本的な基本の理解を抜けたまま突っ走ってできるようなものではありません。
中断して基礎からやり直してください。

[sola-msr]

m.ts10806さんと同意見です

[m.ts10806]

(でも基礎からやり直せ指摘をされる人って結局やらなくて同じ指摘をいろんな人にされ続ける人ばかりなのが不思議)

[m.ts10806]

小手先だけでやっても結局一歩進んで三歩下がるだけなので。そこに気づけない人はずっと成長しないまま、丸投げを繰り返すことになりす。

[sola-msr]

たとえこの問題を解決しても・・・って感じですね・・・

[Nitta]

基礎からしっかりやりたいと思う。
この質問を最後に暫く書き込むのを辞めたいと思うので、
この質問だけは回答してもらえないでしょうか？

[m.ts10806]

回答してるのになぜ回答してと依頼してるのでしょうか。

[m.ts10806]

それに今ついてる回答、コメントで何もヒントにできないのでしたら、今やろうとしていることは今やるべきではないということです。

どんなに期待してもコピペで解決できるコードは出てきませんよ。理解
なく持っていくだけになるのが分かってるから。

手に負えないものをいつまでも追ってるくらいならさっさと基礎修得に切り替えた方が何倍も賢明です。