LaravelPassportを使ってフロントとバックを分離したVue.jsのログインでクロスドメインエラーになる

Question

前提・実現したいこと

現在LaravelとVue.jsを使ってAPI認証の学習をしているのですが、「CORSポリシーによってブロックされています」とのエラーが発生し一向に前に進めないため質問させていただきます。

laravel側でアクセス許可するオリジンを定義していてもずっと以下のエラーが発生しております。

解決方法をご存知の方、お手数ですがお力添えをお願いいたします。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'http://localhost:8000/api/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8000' that is not equal to the supplied origin.

該当のソースコード

Vue.js

Login.vue

<template>
  <div class="">
    {{ id }}
    <from>
      <input type="email" v-model="email">
      <input type="password" v-model="password">
      <button value="send" @click="login()">login</button>
    </from>
    <button value="send" @click="hoge()">hoge</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      id: 'hoge',
      email: '',
      password: ''
    }
  },
  methods: {
    login: function () {
      let param = {email: this.email, password: this.password}

      const axiosPost = axios.create({
        xsrfHeaderName: 'X-CSRF-Token'
      })
      const options = {headers: {
        'mode': 'cors'
      }}

      axiosPost.post('http://localhost:8000/api/login', param, options
      ).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },

Laravel

api.php

Route::group(['middleware' => ['cors']], function () {
    Route::match(["post", "options"], "/hoge", "HomeController@hoge");
    Route::match(['post', 'options'], '/login', 'Api\V1\Auth\LoginController@login');
});

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', 'http://localhost:8080')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
            ->header('Access-Control-Allow-Credentials', 'true');
    }
}

LoginController.php

<?php

namespace App\Http\Controllers\Api\V1\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\JsonResponse;

class LoginController extends Controller
{


    public function login(Request $request): JsonResponse
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            $user = Auth::user();
            $token = $user->createToken('Laravel Password Grant Client')->accessToken;
            return new JsonResponse(['token' => $token], 200);
        }

        return new JsonResponse([
            'message' => 'Unauthenticated.'
        ], 401);
    }
}

試したこと

####ログイン以外のAPI通信
レスポンスを返すだけのリクエストを行ったところ、正常に200が返ってきました

    hoge: function () {
      const axiosPost = axios.create({
        xsrfHeaderName: 'X-CSRF-Token'
      })
      axiosPost.post('http://localhost:8000/api/hoge', {
        headers: {
          mode: 'cors'
        }
      }).then(response => {
        console.log('hoge')
        console.log(response)
      })

    public function hoge(Request $request) {
        return response()->json($request);
    }

axiosのヘッダー

以下の認証情報をリクエストするヘッダーを
axiosに追加しましたが、こちらは同様のエラーとなりました。

const axiosPost = axios.create({
   xsrfHeaderName: 'X-CSRF-Token',
   withCredentials: true
})

補足情報（FW/ツールのバージョンなど）

フロント

• Vue-cli
• axios

ホスト
http://localhost:8080

サーバー

• Laravel
• Laravel Passport

ホスト
http://localhost8000

参考

https://labor.ewigleere.net/2019/01/31/axios-session-cors/

https://qiita.com/kobayashi-m42/items/c0a2609ae61a72dcc60f