как отправить заголовок при запросе ресурса тегом ?
GET запрос на сервере требует аутентификации при помощи передачи токена в заголовке, но как передать заголовок в запросе, который отправляет браузер для тега ?
прочитал, что у тега аудио есть аттрибут crossorigin, с помощью которого можно использовать стандартные методы http аунтефикации, но как установить заголовок непонятно
<audio src="url" crossorigin="use-credentials" />
подскажите как установить заголовок Authorization для такого запроса?
import React from "react";
import {SERVER} from '../constants';
export const Player = ({recordingId}) => {
let jwt = JSON.parse(window.localStorage.getItem('auth')).jwt;
if (typeof jwt !== "string") return false;
return <audio
src={SERVER + '/records/' + recordingId}
controls
crossOrigin="use-credentials"
/>
}
Ответы (1 шт):
На самом деле в вашем случае несколько вариантов.
1. Давать клиенту подписанную ссылку на аудио дорожку, к примеру:
<audio src="audio.mp3?exp=unix_ts&sign=<sign>" crossorigin="use-credentials"/>
Где sign - это SHA256(exp, sailt)
При запросе на сервер будет необходимо сравнить подпись, и проверить время жизни ссылки.
2. Передавать токен авторизации в query параметре, и на сервере извлекать его от туда.
<audio src="audio.mp3?authorization=<Bearer token>" crossorigin="use-credentials"/>
3. Воспользоваться fetch api, и передавать авторизацию в заголовке.
- Полностью загружать дорожку в память, после чего добавлять ссылку к тегу audio используя
URL.createObjectURLили MediaSource - https://developer.mozilla.org/ru/docs/Web/API/MediaSource - Использовать потоковое чтение с сервера + MediaSource https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams