как отправить заголовок при запросе ресурса тегом

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 шт):

Автор решения: Petr Chalov

На самом деле в вашем случае несколько вариантов.

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, и передавать авторизацию в заголовке.

  1. Полностью загружать дорожку в память, после чего добавлять ссылку к тегу audio используя URL.createObjectURL или MediaSource - https://developer.mozilla.org/ru/docs/Web/API/MediaSource
  2. Использовать потоковое чтение с сервера + MediaSource https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams
→ Ссылка