Navigator.sendBeacon не работает с заголовками авторизации - PullRequest
Новая
       30

Navigator.sendBeacon не работает с заголовками авторизации

0 голосов
/ 19 февраля 2020

В последнее время chrome прекращение поддержки синхронизации xmlhttprequest при событии выгрузки страницы или до загрузки https://www.chromestatus.com/feature/4664843055398912

я пробую это решение Выполнение асинхронного получения службы при закрытии окна браузера / Вкладка с Angular, но, кажется, не работает в последних chrome версиях

Теперь я использую api navigator.sendbeacon вот так 

let headers = {
       type: 'application/json; charset=utf-8',
       'authorization': `bearer ${token}`
  }
   let blob = new blob([json.stringify({a:"9"})], headers);

    navigator.sendbeacon(uri, blob);

API выдает 401 так похоже, авторизация не работает, есть ли другая альтернатива navigator.sendBeacon

1 Ответ

0 голосов
/ 25 февраля 2020

На момент написания статьи нет. Chrome (и, вероятно, другие браузеры слишком рано, чем позже) запретят XHR-syn c из-за плохого UX для пользователя (браузер зависает, если пользователь закрывает вкладку, и выполняется запрос XHR-syn c ).

Хотя есть несколько обходных путей, но у каждого есть и свои недостатки

  1. Используйте новый (и экспериментальный) sendBeacon API - sendBeacon просто «ставит в очередь» запрос, и это гарантирует, что запрос будет запущен даже при выгрузке страницы. Это тоже без блокировки UX. Некоторые ограничения в этом отношении заключаются в том, что вы не можете изменить заголовки запроса по умолчанию. Если вам НУЖНО добавить пользовательские заголовки, вам придется использовать BLOB-объект , и эти заголовки тоже должны быть совместимы с CORS. И не будет работать в старых браузерах (глядя на вас, IE)
  2. Use fetch() API + keepalive флаг - но это снова работает, если вы запрашиваете заголовки в CORS-safelist. По сути, если ваш запрос fetch() имеет определенные заголовки запроса, то из соображений безопасности можно выполнить предварительный запрос. Если такой предварительный запрос сделан, то fetch() + keepalive запрещается некоторыми браузерами. В основном вам нужно, чтобы ваш запрос был простым, чтобы это работало. Например, такие как вы не можете использовать content-type=application/json здесь. Одним из способов решения этой проблемы является отправка данных в формате text/plain и заставить ваш сервер обрабатывать их соответствующим образом. Подробнее о CORS простых и предварительных запросах можно найти здесь.
  3. Chrome разрешает временный обходной путь, но он будет работать только до октября 2020 года. Подробнее об этом здесь .
...