Файлы cookie CSRF не установлены для междоменных запросов с использованием Laravel Sanctum и Angular - PullRequest
Новая
       67

Файлы cookie CSRF не установлены для междоменных запросов с использованием Laravel Sanctum и Angular

1 голос
/ 01 мая 2020

Обзор

У меня есть Laravel API с питанием, локально размещенный в http://tenant.api.hydrogen.local и Angular 9.2 SPA, который обслуживается в http://localhost: 8100 . Я недавно установил Laravel Sanctum для аутентификации и следовал инструкциям для SPA, перечисленным в документах , но токен CSRF не присоединен к запросам от SPA, и поэтому я получаю ошибку несоответствия токена CSRF.

В соответствии с инструкциями я делаю начальный вызов //abc.api.hydrogen.local/sanctum/csrf, прежде чем впоследствии попытаться войти в систему: 

this.http.get('sanctum/csrf-cookie')
    .pipe(
        switchMap(result => this.http.post('auth/login', {'email': email, 'password': password}))
    );

Примечание: у меня есть перехватчик, который добавляет URL-адрес запроса к URL-адресу api url '// ab c .api.hydrogen.local / 'например' sanctum / csrf-cook ie 'станет' //abc.api.hydrogen.local/sanctum/csrf-cookie'

Ответ от sanctum / csrf-cook ie возвращается с ожидаемыми заголовками: 

Access-Control-Allow-Credentials: true
Set-Cookie: XSRF-TOKEN=eyJpdiI6Ilc3UkRLR1BSZ29TWVh3ZWZEQ3Y4aGc9PSIsInZhbHVlIjoiRUZBZXNFWTlZbWo5QWhIeWsrRmpjNUZVWkExSGtaT1hzUTVnSXpoaGQ4c3dFc2VLNjZsUHlUVWFmbG1uVVdKZSIsIm1hYyI6ImU1ZTAxNGFmMjAwNWRiMDhiODFjMGZhYTljYmU1NmRjYTUzYTNmNDJjNWM3YmQyM2FkY2I2OGYwNjYzNGU2MjkifQ%3D%3D; expires=Thu, 30-Apr-2020 13:35:06 GMT; Max-Age=7200; path=/; domain=localhost
Access-Control-Allow-Origin: http://localhost:8100

Однако, когда я смотрю на консоль браузера, я не вижу ничего установленного в хранилище > печенье. Кроме того, к последующему вызову `login / 'не прикреплены файлы cookie, и я получаю ошибку несоответствия токена CSRF.

Я прочитал многочисленные посты, в которых подробно описывались подобные проблемы, и реализовал их рекомендации и конфигурации, включая следующие: 1026 *

Laravel API

  • В .env я установил SESSION_DRIVER = cook ie и SESSION_DOMAIN = localhost: 8100
  • В config / sanctum я добавил localhost : 8100 для доменов с состоянием
  • В config / cors я установил support_credentials = true и разрешил все пути, заголовки и источники (используя значение '*')

Angular SPA

  • Я реализовал глобальный перехватчик, который устанавливает withCredentials = true для всех запросов
  • Я убедился, что мои вызовы API используют скорее //abc.api.hydrogen.com/ чем http://abc.api.hydrogen.com/
  • Я также попытался перехватчиком установить заголовок X-XSRF-TOKEN, как рекомендовано здесь , однако извлеченный токен является нулевым, так как они не были установлены в браузере

1 Ответ

0 голосов
/ 08 мая 2020

Эта проблема возникла из-за того, что браузер / angular будет прикреплять файлы cookie только к запросам, которые имеют тот же домен, на который поступил запрос.

Чтобы исправить это в среде разработчика, где приложение angular обслуживается на локальном хосте, а приложение Laravel находится в домене, подобном ab c .api.hydrogen.local, я проксировал запросы от angular app:

Сначала убедитесь, что ваши запросы являются относительными маршрутами, например, я изменил свои вызовы на / api / sanctum / crsf, который затем проксируется на http://abc.api.hydrogen.local/sanctum/crsf

Затем создайте конфигурацию прокси proxy.conf.json в root проекта: 

{
    "/api/*": {
      "target": "http://abc.api.hydrogen.local",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug",
      "pathRewrite": {
        "^/api": ""
      }
    }
}

Затем отредактируйте angular.json, чтобы использовать прокси, когда он обслуживает: 

"architect": {
    ...
    "serve": {
        ...
        "options": {
            ....
            "proxyConfig": "proxy.conf.json"
        }
    }
}

Наконец, в вашем файле .env добавьте следующее, чтобы гарантировать, что sanctum идентифицирует запросы как от SPA первого лица, а браузер может читать и прикреплять файлы cookie к запросу. 

SANCTUM_STATEFUL_DOMAINS=localhost,.hydrogen.local
SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost

Теперь все должно работать .

...