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。默认值为“假”。 我希望它可以节省您的时间。

Answer 3

我发现了一个关于 CORS 问题的独特问题。

我在 Laravel 9 中的服务器端没有发现任何 CORS 问题。

我在客户端发现了一个问题。

如果您不包含请求标头：Accept：application/json，那么您的请求将获得 302 Found 重定向响应代码，这就是您将收到 CORS 错误的地方。

我希望这能节省您的时间。 :)

Answer 4

我在本地主机上遇到了同样的问题，因为我没有存储文件夹的写权限。

Answer 5

有点晚了，但今天我不得不将 Laravel 项目从版本 8 更新到版本 9，并且遇到了同样的问题。

官方指南中的可信代理部分描述了此问题。

在您的

app/Http/Middleware/TrustProxies.php

文件中，将

use Fideloper\Proxy\TrustProxies as Middleware

更新为

use Illuminate\Http\Middleware\TrustProxies as Middleware

。

接下来，在

app/Http/Middleware/TrustProxies.php

内，您应该更新

$headers

属性定义：

// Before...
protected $headers = Request::HEADER_X_FORWARDED_ALL;
 
// After...
protected $headers =
    Request::HEADER_X_FORWARDED_FOR |
    Request::HEADER_X_FORWARDED_HOST |
    Request::HEADER_X_FORWARDED_PORT |
    Request::HEADER_X_FORWARDED_PROTO |
    Request::HEADER_X_FORWARDED_AWS_ELB;

Answer 6

添加新的中间件应用\Http\Middleware\Cors.php

namespace App\Http\Middleware;

use Closure;

class Cors {
    
    public function handle($request, Closure $next) {
        
        $response = $next($request);
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'POST, GET');
        $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With, Application', 'ip');
        return $response; 
    }
}

将此行添加到 app\Http\Kernel.php

protected $middleware = [
         .....,
        \App\Http\Middleware\Cors::class,
    ];