Laravelでajax(POST)を使うときに気をつけること

0.前提条件

環境：cloud9、laravel 5.3、PHP7.0
resorces/view/~.blade.php　からajaxでpostするときにこんなエラーメッセージがでた。

POST https://laravel-knhj-test/test 419 (unknown)

どうやらLaravelではデフォルトでPOST通信には全てCSRFトークンをつけてやる必要があり、ajaxでの通信でもつける必要があるらしい。

1.XMLHttpRequestにCSRFトークンを入れる

JavascriptでCSRFトークンをリクエストヘッダーに入れるためには以下の記載が必要になる。

index.blade.php

<meta name="csrf-token" content="{{ csrf_token() }}">
(中略)
<script>
　　　　var formdata = new FormData();
      formdata.append('name', 'knhj');

     var xhttpreq = new XMLHttpRequest();
     xhttpreq.onreadystatechange = function () {
        if(xhttpreq.readyState == 4 && xhttpreq.status == 200) { alert(xhttpreq.responseText);}
        if(xhttpreq.readyState == 4 && xhttpreq.status != 0) {alert("アップロード完了");}
     };
     var token = document.getElementsByName('csrf-token').item(0).content; 
     xhttpreq.open("POST", "ポスト先", true);
     xhttpreq.setRequestHeader('X-CSRF-Token', token); 
     xhttpreq.send(formdata);
</script>

ポイントは２点。
①metaタグでCSRFトークンを作成して、getElementsByNameでトークンを取得する。
②openした後（xhttpreq.openをxhttpreq.setRequestHeaderより後に書くとエラーが出る）、setRequestHeaderメソッドを使ってCSRFトークンをリクエストヘッダーに入れる。

2.参考URL

http://kayakuguri.github.io/blog/2017/12/06/laravel-ajax-csrf/
https://stackoverflow.com/questions/28524485/xmlhttprequest-throwing-invalidsateerror-saying-object-state-must-be-opened
https://readouble.com/laravel/5.5/ja/csrf.html#csrf-x-csrf-token
https://re-engines.com/2018/05/31/javascript-csrf/
https://stackoverflow.com/questions/46466167/laravel-5-5-ajax-call-419-unknown-status
http://repenguin.hateblo.jp/entry/2016/09/26/124056