見出し画像

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

knaka Tech-Blog


■ 概要

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 の、クロスドメイン対応の修正を追加

画像1

■  参考、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通信できました


この続きをみるには

この続き: 26文字
この記事が含まれているマガジンを購入する

Vue CLI , Laravel開発の事例、ノウハウに関する記事を集めました。 ■ 免責事項 / 注記 , 内容について動作確認して…

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!