Vue CLI+ Laravel 5.8で、クロスドメイン構成 準備編

■ 概要

Vue CLIで、
バックエンドを、Laravel API サービス
とした。SPAの事例となります。
PWAも対応しています

■ 構成

Vue CLI
vue-router
@vue/cli-service : 4.4.0
・API サービス:
Laravel 5.8
nginx
mysql
・フロント設置ドメイン ,Vue-CLI:
netlify / ホスティングサービス

・構成図みたいな図
　複数ドメイン構成で、やや複雑になりますが。
　ブラウザセキュリティの、クロスサイト関係のエラーがでましたので
　Laravel の、クロスドメイン対応の修正を追加

■  参考、Laravel のクロスドメイン対応

Middleware の追加等で対応しました。 下記参考させて頂きました
https://qiita.com/kobayashi-m42/items/c0a2609ae61a72dcc60f

■ 手順

Middleware　,cros 追加

php artisan make:middleware Cors

・ Cors.php の、編集
https://github.com/kuc-arc-f/lara58a/blob/master/app/Http/Middleware/Cors.php

Access-Control-Allow-Origin に、通信元ドメインを設定する例でした
http://localhost:8080 は、Vue CLIサービスの場合

public function handle($request, Closure $next)
{
return $next($request)
   ->header('Access-Control-Allow-Origin', 'http://localhost:8080')
   ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
   ->header('Access-Control-Allow-Headers', 'Content-Type');        
}

・　Kernel.php　, Cors 追加
app/Http/Kernel.php

'cors' => \App\Http\Middleware\Cors::class,

・上記で、Vue CLIから、Laravel ドメインに axiosで通信可能になり、
　異なるドメイン間で。JS通信できました