Совместное использование ресурсов между источниками (CORS) — это важный механизм безопасности, который не позволяет веб-браузерам отправлять запросы к источнику, отличному от того, из которого был загружен сценарий (домен, протокол или порт). При создании приложений с помощью Laravel и Vue.js правильная обработка заголовков CORS имеет решающее значение для обеспечения бесперебойной связи между интерфейсом и сервером. В этой статье мы рассмотрим несколько методов установки заголовков CORS в Laravel и Vue.js, а также приведем примеры кода.

Метод 1: подход промежуточного программного обеспечения Laravel
Один из наиболее распространенных способов обработки заголовков CORS в Laravel — использование промежуточного программного обеспечения. Вот пример того, как вы можете создать промежуточное программное обеспечение для установки необходимых заголовков:

// app/Http/Middleware/CorsMiddleware.php
namespace App\Http\Middleware;
use Closure;
class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
        $response->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
        return $response;
    }
}

Чтобы включить промежуточное программное обеспечение, зарегистрируйте его в файле App\Http\Kernel.php:

// app/Http/Kernel.php
protected $middleware = [
    // ...
    \App\Http\Middleware\CorsMiddleware::class,
];

Метод 2: пакет Laravel CORS
В качестве альтернативы вы можете использовать сторонний пакет, например barryvdh/laravel-cors, чтобы упростить процесс настройки заголовков CORS. Этот пакет предоставляет промежуточное программное обеспечение, которое автоматически добавляет необходимые заголовки. Вот пример того, как его использовать:

Установите пакет с помощью Composer:

composer require barryvdh/laravel-cors

Зарегистрируйте промежуточное ПО в App\Http\Kernel.php:

// app/Http/Kernel.php
protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

Метод 3: перехватчики Axios Vue.js
Если вы отправляете запросы API из внешнего интерфейса Vue.js с помощью Axios, вы можете установить заголовки CORS непосредственно в перехватчиках Axios. Вот пример:

// main.js
import axios from 'axios';
axios.interceptors.request.use((config) => {
    config.headers['Access-Control-Allow-Origin'] = '*';
    config.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, PATCH, DELETE, OPTIONS';
    config.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization';
    return config;
});

Правильная обработка заголовков CORS необходима для бесперебойной связи между приложениями Laravel и Vue.js. В этой статье мы рассмотрели три метода установки заголовков CORS: использование промежуточного программного обеспечения Laravel, использование пакета Laravel CORS и установку заголовков в перехватчиках Vue.js Axios. Реализуя эти подходы, вы можете гарантировать бесперебойную работу ваших приложений при соблюдении политик безопасности CORS.