我尝试使用Vuejs构建一个单独的前端Web应用程序，并从我构建的Laravel 9 API中获取数据，当我尝试从前端访问数据时，浏览器控制台中会出现响应：

CORS策略已阻止从源“http：//127.0.0.1：8080”访问位于“http：//localhost：8000/api”的XMLHttpRequest：请求的资源上不存在“Access-Control-Allow-Origin”标头。

后端程式码（Laravel 9）

1-api.php文件

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Models\User;
/*
|--------------------------------------------------------------------------
| 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::get('/', function () {
    $users = User::all();
    return response()->json($users, 200);
});

2-cors.php文件（默认配置）

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

前端代码（Vuej）

〉1- main.js文件（包含vue设置代码）

import { createApp } from 'vue'

import axios from 'axios'
import VueAxios from 'vue-axios'

import App from './App.vue'

const app = createApp(App)

app.use(VueAxios, axios)
app.mount('#app')

2-Users.vue（获取数据的组件）

<template>
  <div class="users">
    test
    <button @click="getUsers()">Get Users</button>
    {{ users }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    }
  },
  methods: {
    getUsers() {
      this.axios.get('http://localhost:8000/api').then((response) => {
        // this.users = response;
        // console.log(this.users);
        console.log(response);
      }).catch(err => console.log('error: ' + err));
    }
  }
}

更新：更多图示

我已经使用了谷歌扩展，允许CORS的浏览器和扩展添加以下标题自动响应：

a）访问控制允许方法：GET、PUT、POST、DELETE、HEAD、选项

B）访问控制允许方法：*

但我认为使用扩展不是一个解决方案，因为我希望不仅在调试模式下，
下面是浏览器中响应的一些屏幕截图。

1- CORS浏览器中的错误响应

2-启用扩展之前的报头响应数（仅9个报头）：

3-启用扩展之前的报头响应详情（仅9个报头）：

4-启用扩展后的报头响应数（11个报头）：

5-启用扩展后标题响应的详细信息（11个标题）

x1c4d 1x指令集