Подписи Web VTT в BLOB-объекте Azure не работают даже после включения CORS

Question

Я хочу, чтобы файл с заголовком.vtt воспроизводился с видео в формате mp4 по http://attendedstorage.com/videotest2.html

Однако файл.vtt, размещенный на BLOB-объекте Azure, не просматривается. Я тестировал в Chrome и IE10.

Я установил "content-type: txt/vtt".

Эта проблема состоит из трех частей:

1).vtt не читается браузерами с помощью инструментов Chrome dev http://cropme.ru/a672cceae9962b975f15b6ddacfe061e - я могу использовать справку, чтобы выяснить, почему...

2) Я также включил CORS для службы BLOB-объектов. Однако, когда я не могу настроить "Access-Control-Allow-Origin: *" или "Access-Control-Allow-Origin: *.attendedstorage.com", работая со следующими инструментами:

По http://cropme.ru/546c699f8a1264994c18a624eeaa5060 - Cerebrata AMS - установлен CORS, но нет http-заголовка, доступного для настройки "Access-Control-Allow-Origin: *" http://cropme.ru/20ac02af8b883e7cf09f4f076e137770

В соответствии с http://cropme.ru/f95fbbcf94c26b65f48163ee4dc98194 - Zudio - невозможно установить "Access-Control-Allow-Origin: *" В соответствии с http://cropme.ru/bad39b334aad865a20ac016f981038be - Cloudberry - позволяет установить "Access-Control-Allow-Origin": * "но не держит его, когда смотришь, если оно зарегистрировано.

Я еще не достиг уровня, на котором я знаю, как работать с API напрямую, поэтому я предпочитаю использовать инструменты.

3) Я также проверил mp4 и vtt в папке видео на веб-сайте azure, но даже в том же домене vtt не распознается. Ниже заголовков домена:

    WEBVTT HEADER 
    Remote Address:137.117.84.54:80
    Request URL:http://attendedstorage.com/test3.vtt
    Request Method:GET
    Status Code:404 Not Found
    Request Headersview source
    Accept:*/*
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8
    Cache-Control:no-cache
    Connection:keep-alive
    Host:attendedstorage.com
    Pragma:no-cache
    Referer:http://attendedstorage.com/videotest3.html
    User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko)              
    Chrome/34.0.1847.116 Safari/537.36
    Response Headersview source
    Content-Length:103
    Content-Type:text/html
    Date:Sun, 20 Apr 2014 23:49:36 GMT
    Server:Microsoft-IIS/8.0
    X-Powered-By:ASP.NET

    MP4 VIDEO HEADER
    Request URL:http://attendedstorage.com/test3.mp4
    Request Headers CAUTION: Provisional headers are shown.
    Accept-Encoding:identity;q=1, *;q=0
    Cache-Control:no-cache
    Pragma:no-cache
    Range:bytes=0-
    Referer:http://attendedstorage.com/videotest3.html
    User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/34.0.1847.116 Safari/537.36

ОБНОВЛЕНИЕ: я пересмотрел версию http://attendedstorage.com/videotest3.html чтобы проверить привязку видео к дорожке (то есть это не должно быть в том же доменном источнике), что и к http://attendedstorage.com/test3.mp4 и https://attendedstorage.com/test3.vtt. Вот что говорит Chrome Console:

    InText track from origin 'https://assetsattendedstorage.com'has been blocked from loading:         
    Not at same origin as the document, and parent of track element does not have a 'crossorigin' 
    attribute. Origin 'http://attendedstorage.com' is therefore not allowed access. 
    videotest3.html:1
    GET http://attendedstorage.com/test3.vtt 404 (Not Found) videotest3.html:1

Это заставляет меня думать, что для решения части 3) описанной выше проблемы мне нужно также установить заголовок http на веб-сайте Azure, если это "родительский элемент отслеживания" - я пытаюсь прочитать об Azure Powershell, но Я бы предпочел сделать это с помощью графического интерфейса или инструмента, если таковой существует, который позволяет мне менять заголовки http на лазурном веб-сайте Participstorage.com, поскольку мне потребуется некоторое время, чтобы понять Powershell. Тем не менее, я не понимаю, почему это необходимо в этом сценарии, поскольку видео и дорожка происходят из того же домена, что и HTML-файлы. Это также все еще оставляет проблему 2) открытой, так как я включил CORS в BLOB, но я не смог использовать инструменты для изменения заголовка http "Access-Control-Allow-Origin: *" в BLOB.

Answer 1

На всех скриншотах я заметил одну вещь: для разрешенных источников вы пытаетесь установить значение как http://*.attendedstorage.com, Я думаю, что это вызывает проблемы. URL-адреса, определенные в разрешенных источниках, должны точно соответствовать реальным URL-адресам, с которых исходит межбраузерный запрос (и это чувствительно к регистру). От documentation page:

AllowedOrigins: исходные домены, которым разрешено делать запросы к службе хранения через CORS. Домен происхождения - это домен, из которого исходит запрос. Обратите внимание, что источник должен точно соответствовать регистру, который возраст пользователя отправляет в службу. Вы также можете использовать подстановочный знак '*', чтобы разрешить всем исходным доменам отправлять запросы через CORS. В приведенном выше примере домены http://www.contoso.com/ и http://www.fabrikam.com/ могут отправлять запросы в службу с помощью CORS.

Вы можете попробовать одну вещь, указав фактическое имя домена (http://attendedstorage.com, https://attendedstorage.com) и посмотрим, поможет ли это. Если это не сработает, попробуйте указать * (т.е. разрешены все доменные имена), чтобы сузить проблемы.

Answer 2

Я не уверен в вашем сценарии. однако на прошлой неделе я столкнулся с той же проблемой, когда загружал свой контент / блоб в облако напрямую из JavaScript. Решением моей проблемы было то, как я создавал свой SAS (подпись защищенного доступа). Один из полезных блогов MSDN помог мне, и он может помочь всем вам.

Код, который я пропустил, был

private static void ConfigureCors(ServiceProperties serviceProperties)
{
    serviceProperties.Cors = new CorsProperties();
    serviceProperties.Cors.CorsRules.Add(new CorsRule()
    {
        AllowedHeaders = new List<string>() { "*" },
        AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post,
        AllowedOrigins = new List<string>() { "*" },
        ExposedHeaders = new List<string>() { "*" },
        MaxAgeInSeconds = 1800 // 30 minutes
     });
}

Это в основном добавляет некоторые правила в SAS Url, и я могу загружать свои файлы в BLOB-объекты.

Answer 3

Что касается parent of track element does not have a 'crossorigin' attribute. проблема, это относится не к хранилищу BLOB-объектов Azure, а к HTML-файлу, в который вы загружаете дорожки. Crossorigin является атрибутом для установки <track \> тег родительский, например, <video controls crossorigin="anonymous">,

Если вы можете решить проблему, связанную с установкой заголовков HTTP в Azure, добавление атрибута crossorigin к вашему видео или аудио тегу должно решить всю проблему.