Vue.jsとPhpで見積りシステム（３）〜CORS設定編〜

mistumori-apiサーバのCORS設定

mistumori-apiサーバのCORS設定

CORSとはCross-Origin Resource Sharingの頭文字でブラウザが別のサーバとやり取りする仕組みです。
この仕組を使ってユーザが利用するブラウザから別のサーバにある情報にアクセスしデータの取得や更新ができるようになります。
見積もりシステムではクライアントのブラウザ上からAPIサーバに向けて通信を行う必要があります。サーバ側がCORS設定されていないとcorsエラーで接続ができません。
※JSONPなどを使い別サーバの情報にアクセスする方式も有りましたがセキュリティの問題などで最近では使われていません。

Middlewareの作成

% php artisan make:middleware Cors

作成したMiddlewareの編集

% vi app/Http/Middleware/Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

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', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type');
    }
}

RouteMiddlewareに作成したcors.phpを追加

% vi app/Http/Kernel.php

・
・
    protected $routeMiddleware = [
        ・
        ・
        ・
      'cors' => \App\Http\Middleware\Cors::class,
    ];
・
・

Routes/api.phpのルートを修正

<?php

use Illuminate\Http\Request;

/<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::middleware(['cors'])->group(function () {
    // CPUの取得
    Route::get('cpu', 'ApiController@get_cpu');
    // マザーボード
    Route::get('mother_board/{cpu?}', 'ApiController@get_mother_board');
    // グラフィックカード
    Route::get('video_card', 'ApiController@get_video_card');
    // ハードディスク
    Route::get('storage', 'ApiController@get_storage');
    // ケース
    Route::get('pc_case','ApiController@get_pc_case');
    // 税率取得
    Route::get('tax','ApiController@get_tax');
});

以上で外部のサイトからAxiosで接続できるよになります。