Для настройки аутентификации между проектом на Laravel (бэкенд) и Vue (фронтенд), работающим на разных доменах, с использованием Laravel Sanctum и поддержкой cookie, нужно выполнить несколько шагов.
### Шаги по настройке
1. **Включите CORS:**
- Откройте файл `config/cors.php` и добавьте разрешение для вашего фронтенда:
```php
'paths' => ['api/*'], // если вы используете маршрут api
'allowed_origins' => ['http://changed-sanctum-vue.test:5173'], // добавьте ваш фронтэнд
'allowed_headers' => ['Content-Type', 'X-Requested-With', 'Authorization', 'X-CSRF-TOKEN'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true, // Это важно
```
2. **Настройте cookie:**
- В `config/session.php` установите:
```php
'same_site' => 'none', // позволяет отправлять cookie на разные домены
'secure' => env('SESSION_SECURE_COOKIE', true), // включите только если используете HTTPS
```
3. **Настройте Sanctum:**
- В `config/sanctum.php`, убедитесь, что у вас включена поддержка CORS:
```php
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'changed-sanctum-vue.test:5173')),
```
4. **Настройте HTTPS:**
- Так как вы установили `same_site` на `none`, браузер требует, чтобы cookies были переданы через HTTPS. Используйте `mkcert` для настройки локальной среды с HTTPS.
5. **Настройка Axios на фронтенде:**
- Убедитесь, что ваши настройки Axios были обновлены для включения credentials:
```javascript
import axios from 'axios';
axios.defaults.baseURL = 'https://laravel-sanctum-vue.test';
axios.defaults.withCredentials = true; // Включите отправку cookies
```
6. **Сертификаты для локальной разработки:**
- Настройте так, чтобы ваш `vite.config.js` использовал HTTPS:
```javascript
import mkcert from 'vite-plugin-mkcert';
export default {
plugins: [mkcert()],
server: {
https: true,
host: 'changed-sanctum-vue.test',
},
};
```
### Дополнительные рекомендации
- После всех этих изменений всегда очищайте кеш и используйте режим инкогнито, чтобы избежать локальных кешей и кук.
- Проверьте, что как бэкенд, так и фронтенд запущены и могут корректно обрабатывать запросы и ответы.
- Если у вас возникают проблемы, проверьте логи браузера на ошибки CORS или проблемы с cookie.
После выполнения этих шагов ваша аутентификация между двумя проектами должна заработать даже при их размещении на разных доменах.