在laravel和vue js中调用要查看的数据时出错

// Laravel 控制器
public function getData()
{
    $data = Data::all();
    return response()->json($data);
}

// Vue.js 组件
<script>
import axios from 'axios';

export default {
    data() {
        return {
            items: []
        };
    },
    mounted() {
        axios.get('/api/data')
            .then(response => {
                this.items = response.data;
            })
            .catch(error => {
                console.error('There was an error!', error);
            });
    }
};
</script>

// Laravel 中间件
php artisan make:middleware CorsMiddleware

// app/Http/Middleware/CorsMiddleware.php
public function handle($request, Closure $next)
{
    $response = $next($request);
    $response->headers->set('Access-Control-Allow-Origin', '*');
    $response->headers->set('Access-INF-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
    return $response;
}

protected $routeMiddleware = [
    // 其他中间件
    \App\Http\Middleware\CorsMiddleware::class,
];

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

// routes/api.php
Route::get('/data', [DataController::class, 'getData']);

axios.get('/api/data')