Правильная настройка Laravel Sanctum и Angular

Я пытаюсь подключить свое приложение angular к моему Laravel 7 с помощью Sanctum.

Бэкэнд работает в вызовах виртуального хоста wamp (pruebas.test), и конфигурация такая:

.env:

APP_URL=http://pruebas.test
SESSION_DOMAIN=pruebas.test
SANCTUM_STATEFUL_DOMAINS=localhost:4300

config / cors.php

paths' => [
        'api/*',
        '/login',
        '/logout',
        '/sanctum/csrf-cookie'
    ],

'supports_credentials' => true,

config / session.php (теперь same_site не равно none, но я пробовал использовать lax, strict и null параметры)

'same_site' => "none",

kernel.php

'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],`

Сначала мы работаем с Angular 10 и реализуем метод входа в систему с помощью этого кода:

login(): void {
    const url = `http://pruebas.test/sanctum/csrf-cookie`;
    this.http.get<any>(url).subscribe((res) => {
      console.log(res);

      // the response is correct but not set the cookies
      // this.http.post<any>('http://pruebas.test/api/v1/login', { password: 'password', 'email': '[email protected]' }).subscribe(success => {
      //   console.log(success);
      //   this.http.get<any>('http://pruebas.test/api/v1/articles').subscribe(success => console.log(success));
      // }
      //   , error => console.log(error))
    })
  }

Также у нас есть и перехват для добавления withCredentials в запрос заголовка:

export class AuthInterceptor implements HttpInterceptor {
    headerName = 'X-XSRF-TOKEN';

    constructor(private tokenService: HttpXsrfTokenExtractor) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        req = req.clone({
            withCredentials: true
        })
        console.log(req);
        req.headers.set('withCredentials', 'true');
        if (req.method === 'GET' || req.method === 'HEAD') {
            return next.handle(req);
        }

        const token = this.tokenService.getToken();

        // Be careful not to overwrite an existing header of the same name.
        if (token !== null && !req.headers.has(this.headerName)) {
            req = req.clone({ headers: req.headers.set(this.headerName, token) });
        }

        return next.handle(req);
    }
}

Но браузеры никогда не устанавливают куки, в зависимости от 'same_site' конфигурации, у нас есть разные ответы, но куки никогда не устанавливаются.

same_site = lax = ›Этот Set-Cookie был заблокирован, потому что у него был атрибут SameSite = lax, но он пришел из-за межсайтового ответа, который не был ответом на навигацию верхнего уровня.

same_site = strict = ›Этот Set-Cookie был заблокирован, потому что у него был атрибут SameSite = strict, но он пришел из межсайтового ответа, который не был ответом на навигацию верхнего уровня.

same_site = none = ›Этот Set-Cookie был заблокирован, потому что он имел атрибут SameSite = none, но не имел атрибута Secure, который требуется для использования SameSite = none

Некоторые идеи?


person monchyrcg    schedule 03.09.2020    source источник
comment
Я сам прошел через это с Laravel & Sanctum + Vue.js. Можете проверить мой ответ здесь - может быть, это поможет вам в правильном направлении?   -  person FullStackOfPancakes    schedule 03.09.2020
comment
Спасибо @FullStackOfPancakes. Я предполагаю, что SESSION_DOMAIN - это мой домен api, а в SANCTUM_STATEFUL_DOMAINS доменах сторонних клиентов (Angular, проекты VUE)   -  person monchyrcg    schedule 04.09.2020
comment
Если у вас были api.yoursite.local и app.yoursite.local, то SESSION_DOMAIN=.yoursite.local и SANCTUM_STATEFUL_DOMAINS=yoursite.local:8000. Обратите особое внимание на начальный . на SESSION_DOMAIN   -  person FullStackOfPancakes    schedule 07.09.2020
comment
Вы что-нибудь видите в журналах вашего сервера? Аналогичным образом, что вы видите в Инструментах разработчика Chrome, например какое точное значение отправляемого заголовка set-cookie? Подробное руководство по отладке: chromium.org/updates/same-site/test-debug   -  person rowan_m    schedule 07.09.2020
comment
@FullStackOfPancakes мой api и мой клиент находятся в разных доменах client => localhost:4300 и api => api.pruebas.test   -  person monchyrcg    schedule 08.09.2020