vue + laravel 別ドメインからのaxiosのpostでエラー

Question

vue + laravelによるweb開発を進めています。
初心者のため誤った用語の使い方が多々あると思いますが、失礼します。

とあるデータベースを作成してuser側（user.test）と管理者側(manager.test)の２つのドメインからaxiosを使ってデータ操作をしたいと考えています。データベースへアクセスするためのapiはuser側に作成（ user.test/api/models ）しました。（参考　https://qiita.com/wataphp oka/items/98e2ca53091b629ec165）

管理者側のmaneger.testからgetでapiにアクセスしてデータを表示することははじめCORSエラーが出たもののmiddlewareにcors.phpを作成、karnel.php,　api.php を編集することで解決しました。（参照　https://qiita.com/kobayashi-m42/items/c0a2609ae61a72dcc60f#最後に）

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin','http://manager.test')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type');
    }
}

ここからが本題なのですが管理者側のmanager.testからaxiosのpostをしようとするとうまく動きません。
下記に示すコードで手入力のjsonデータを新たにレコードに追加しようとしています。

<template>
<div>
<form id="contact_form" v-on:submit.prevent="submitForm" action="submitform">
<button type="submit" class="btn btn-primary">insert</button>
</form>
</div>
</template>

<script>
export default {
  data() {
    return {
      sportdatas: null,
    };
  },
  methods:{
  	submitForm: function (){
  		this.$axios
  		.post("http://user.test/api/models",{
		    typenumber: '2',
		    title: 'this',
			date1: '2019/9/30',
			date2: '2019/9/6',
			usetablename: 'this',
			answer1: 'this',
			answer2: 'this',
	
  		})
  		.then(response => {
                    this.sportdatas = response.data;
                })
  	}
  }
};
</script>

上のコードは多少簡略化していますが、同様のコードをuser.test側にも作成したところレコードの挿入ができました（のでコントローラーはあっていると思います。）。しかしながら管理者側では以下のようなエラーが出ます。(chromeのdevtoolのコンソールタブ)

displaysportchart:1 Access to XMLHttpRequest at 'http://user.test/api/models' from origin 'http://manager.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js?id=6995625f4ff2e8fcea40:653 Uncaught (in promise) Error: Network Error
    at createError (app.js?id=6995625f4ff2e8fcea40:653)
    at XMLHttpRequest.handleError (app.js?id=6995625f4ff2e8fcea40:188)

ちなみにmanager側でvou-routerを使用しており、manager.test/postpage　からpostを試みております。corsファイルにmanager.test/postpageを追加して解決するのではと思ったのですが、いろいろ試しましたがおそらく正しい記法でないのかうまくいきません。どなたか教えていただけませんでしょうか。

ちなみにそもそも論なのですが、user.testとmanager.testというように分けるのではなく、user.test とuser.test/managerというようにするべきなのでしょうか。何となくのイメージで堅牢そうに思えたので前者を狙っていますが、実際はどういう構造なのかお聞きしたいです。

Answer 1

質問部分の参照していますURLであります

CORSについて理解してLaravel5.6で対応する

routeを修正
の対応はされてますでしょうか
(OPTIONSメゾットでCORS対応用ヘッダを返す)

Comments

[jigman]

回答ありがとうございます。現在route/api.php は下のようになっています。
<?php
use Illuminate\Http\Request;
Route::middleware(['cors'])->group(function () {
Route::options('accounts', function () {
return response()->json();
});

Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::apiResource('sportdatas','SportdataController');
});
$axios.getでデータを取得したいときに上のように変更しました。

[rururu3]

modelsにもoptionsを指定してみてください
Route::options('models', function () {
return response()->json();
});

[jigman]

追加してみたところ解決はしていませんがエラーメッセージが変わりました。
追加前エラー
Access to XMLHttpRequest at 'http://user.test/api/sportdatas' from origin 'http://manager.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

追加後エラー
POST http://user.test/api/sportdatas net::ERR_ABORTED 419 (unknown status)
Access to XMLHttpRequest at 'http://user.test/api/sportdatas' from origin 'http://manager.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
(modelsがsportdatasになっています)

[rururu3]

419だと
https://qiita.com/aminevsky/items/04cdf17686e28c9847c4
CSRF 保護なのかな

[jigman]

その後いろいろ試しましたがうまくいきませんでした。
今回は同一url上に管理ページも作って進めていこうと思います。
大変丁寧なコメント誠にありがとうございました。