Nuxt.jsフロントエンドから Laravel santum 認証でLaravel APIにアクセスする方法

2020年7月31日

システムの構成

#環境など
ドメイン:laravelsanctum.test
Frontend :  Nuxt.js   https://laravelsanctum.test:3000
Backend  :  LaravelAPI  https://laravelsanctum.test/api
homestead(vagrant)

#ディレクトリ構成
LaravelProject
→ client ( Nuxt プロジェクト)

#設定ファイル
#homestead.yaml
ip: “192.168.10.10”
ssl: true

Laravel

./app/Http/Kernel.php
use Laravel\Airlock\Http\Middleware\EnsureFrontendRequestsAreStateful; を追加

protected $middleware = [ に、

\Fruitcake\Cors\HandleCors::class, を追加

‘api’ => [ に、
EnsureFrontendRequestsAreStateful::class, を追加
],
.env

client ( Nuxt プロジェクト)

package.json

nuxt.config.js

.env

Nuxtjs → LaravelAPI

ログイン処理
./client/pages/auth/signin.vue

 axiosモジュール呼び出し
./config/airlock.php

nuxt.config.js

Nginxのサーバー情報を変更

参考サイト:
https://qiita.com/mutsune/items/06856b310670919080cf

対象ドメインのnginx設定ファイルを修正

以下の追記

Nginxの設定ファイルを編集して以下コマンドを実行

 

以下便利そうな記事
homestead.yaml に sh ファイルを設定してサーバー情報を自動修正
https://medium.com/@maxxscho/laravel-homestead-with-custom-nginx-configurations-2e0fda4ba7dc