Laravel 9 - CORS 不起作用（对 XMLHttpRequest 的访问已被 CORS 策略阻止）

Question

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

从源“http://127.0.0.1:8080”访问“http://localhost:8000/api”的 XMLHttpRequest 已被 CORS 策略阻止：“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,

];

前端代码（Vuejs）

> 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、OPTIONS

b) 访问控制允许方法：*

但我认为这不是使用扩展的解决方案，因为我不仅想在调试模式下解决生产问题

以下是浏览器中响应的一些屏幕截图。

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

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

3- 启用扩展之前的标头响应详细信息（仅 9 个标头）：

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

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

Answer 1

我找到了解决问题的方法，我试图从http://localhost:8000/api获取数据，当我检查 cors.php 文件时，我发现 paths 键包含 2 个如下值：
'paths' => ['api/*', 'sanctum/csrf-cookie']
所以就像我说的那样仅导航到api路径而不是api/ *，因此数组应包含“api”的值，如下所示：
'paths' => ['api/*', 'sanctum/csrf-cookie', 'api']

Answer 2

我个人在将 NuxtJs 连接到 Laravel API 时也遇到了同样的问题。在 Laravel cors.php 文件中，我所做的就是将“supports_credentials”的值设置为 true。默认值为“假”。我希望它能节省您的时间。