Как запустить React внутри Laravel без CORS?

Установите React через Vite в папку resources/js, настройте vite.config.js с плагином laravel, создайте Blade-шаблон с @viteReactRefresh и точкой входа main.jsx. Laravel будет рендерить React через маршрут-заглушку.

Почему React не работает с Laravel на Open Server?

Частая причина — неправильная настройка Vite или отсутствие @viteReactRefresh в Blade-шаблоне. Также проверьте, что точка входа в vite.config.js указывает на main.jsx, а не main.js.

Можно ли использовать React Router с Laravel?

Да, создайте catch-all маршрут в routes/web.php для всех URL, кроме API. React Router будет обрабатывать клиентскую навигацию, а Laravel — только серверные запросы.

Как передать данные из Laravel в React?

Передайте данные через Blade-шаблон в виде JSON-атрибута на div#root, например . В React получите их через document.getElementById('root').dataset.user.

Как настроить React и Laravel вместе на одном домене

Многие разработчики сталкиваются с проблемой интеграции React в Laravel. При стандартной установке Laravel работает на домене, а React - на localhost, что вызывает CORS-ошибки. В этой статье разберём, как объединить фронтенд и бэкенд в одном проекте на Open Server, используя Vite и шаблоны Blade.

Почему возникает CORS-ошибка при интеграции React и Laravel

Когда вы запускаете Laravel на http://example.com, а React - на http://localhost:3000, браузер блокирует запросы между разными источниками. Это стандартная политика безопасности. Решение - настроить React так, чтобы он рендерился внутри Laravel-шаблонов, а не отдельно.

Пошаговая настройка React внутри Laravel на Open Server

Шаг 1. Установка Laravel и создание домена

Установите Laravel через Composer на Open Server. Создайте новый домен, например myapp.loc. Убедитесь, что Laravel работает корректно.

Шаг 2. Установка React с помощью Vite

В корне проекта Laravel выполните команду:

npm create vite@latest resources/js -- --template react

Это установит React в папку resources/js. Затем установите зависимости: npm install.

Шаг 3. Настройка Vite для работы с Laravel

Отредактируйте vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/main.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

Убедитесь, что точка входа - main.jsx, а не main.js.

Шаг 4. Подключение React в Blade-шаблоне

Создайте Blade-шаблон, например resources/views/app.blade.php:

<!DOCTYPE html>
<html>
<head>
    @viteReactRefresh
    @vite('resources/js/main.jsx')
</head>
<body>
    <div id="root"></div>
</body>
</html>

Важно добавить @viteReactRefresh для HMR (горячей перезагрузки).

Шаг 5. Настройка маршрута в Laravel

В файле routes/web.php добавьте маршрут для главной страницы:

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

Этот маршрут будет перенаправлять все запросы на Blade-шаблон, где React возьмёт управление.

Шаг 6. Запуск и проверка

Выполните npm run dev для разработки или npm run build для продакшена. Откройте домен myapp.loc - React должен работать внутри Laravel без CORS-ошибок.

Альтернативные подходы к интеграции React и Laravel

Если вы хотите разделить фронтенд и бэкенд, используйте Laravel как API, а React - как SPA на отдельном домене. В этом случае настройте CORS в Laravel через config/cors.php или используйте Laravel Sanctum для аутентификации. Однако описанный выше метод позволяет работать в одном проекте, что удобно для небольших приложений.

Часто задаваемые вопросы о React и Laravel

Как избежать конфликта маршрутизации между React и Laravel?

Используйте один «catch-all» маршрут в Laravel для всех URL, кроме API-путей. React Router возьмёт на себя клиентскую маршрутизацию.

Можно ли использовать React с Laravel без Vite?

Да, с помощью Laravel Mix или Webpack, но Vite - современный и быстрый инструмент, рекомендованный Laravel. Он обеспечивает HMR и быструю сборку.

Что делать, если React не обновляется после изменений?

Проверьте, что в vite.config.js указан refresh: true и в Blade-шаблоне есть @viteReactRefresh. Также убедитесь, что npm-зависимости установлены полностью.

Как настроить API-запросы из React к Laravel?

Используйте Laravel API-маршруты в routes/api.php. Для аутентификации применяйте Laravel Sanctum или JWT. В React делайте запросы через fetch или axios к эндпоинтам вида /api/....