Сценарий расширения Chrome, вставляющий атрибут crossorigin в тег видео (в облачном хранилище Google), когда компонент рендеринга более одного раза - PullRequest
Новая
       13

Сценарий расширения Chrome, вставляющий атрибут crossorigin в тег видео (в облачном хранилище Google), когда компонент рендеринга более одного раза

0 голосов
/ 16 октября 2018

У меня есть компонент React с тегом, загружающим видео из Google Cloud Storage.Если мой вызов компонента отображается только один раз, хорошо, но если он вызывает несколько раз, скрипт google-chome с именем page.js вставляет атрибут crossorigin в мой тег и выдает ошибку перекрестного определения:

Не удалось загрузить https://storage.cloud.google.com/bobguarana/SampleVideo_1280x720_1mb.mp4: Перенаправление с 'https://storage.cloud.google.com/bobguarana/SampleVideo_1280x720_1mb.mp4' на' https://accounts.google.com/ServiceLogin?service=cds&passive=1209600&continue=https://storage.cloud.google.com/bobguarana/SampleVideo_1280x720_1mb.mp4&followup=https://storage.cloud.google.com/bobguarana/SampleVideo_1280x720_1mb.mp4' заблокировано политикой CORS: заголовок «Access-Control-Allow-Origin» отсутствует в запрошенномресурс.Origin 'http://localhost:3000' поэтому не разрешен доступ.

Я уже включил CORS в Google Bucket.

Я не знаю, поможет ли это, но кусоккода скрипта chrome, выполняющего это, является следующим: 

var crossorigin = target.getAttribute('crossorigin');
                    //console.log(target);
                    if (src) {
                        //console.log('src', src);
                        //only reload if domains are not the same (so crossorigin attribute can kick in)
                        //console.log(src, getHostName(src), document.location.hostname, (crossorigin ? crossorigin : 'anonymous'));
                        if (document.location.hostname != getHostName(src) && 'blob:' != src.substring(0, 5) && !crossorigin) {
                            target.setAttribute('crossorigin', (crossorigin ? crossorigin : 'anonymous'));
                            //target.setAttribute('preload', 'auto');
                            //force "reload" so addedd crossorigin attribute can kick in
                            if (target.src) {
                                target.src = ''+target.src;
                                //target.load();
                            } else {
                                if (target.currentSrc) {
                                    target.load();
                                }
                            }
                        }
                        //setTimeout(function(){
                        //  console.dir(target);
                        //},2000)
                        //console.log(target.src)
                        //console.log(target.currentSrc)
                        //console.dir(target);

                        source = audioContext.createMediaElementSource(target);
                        //read the source channel count
                        filters[0]._defaultChannelCount = (source.channelCount) ? source.channelCount : 2;
                        source.connect(filters[0]);
                        var totalFilters = filters.length;
                        var node;
                        for (var i = 0; i < totalFilters; i++) {
                            node = filters[i + 1];
                            if (node) {
                                filters[i].connect(node);
                            }
                        }

                        filters[filters.length - 1].connect(audioContext.destination);
                        target.setAttribute("eq-attached", "true");

Хотелось бы, чтобы мне не приходилось связываться с внешним интерфейсом, потому что у меня много переменных состояния и это сложный компонент, выполняющий многовещей.

Я уже пытался подписаться, если должен установить компонент false в ответ, но это тоже не сработало.

Я также заметил, что заголовок запроса первого запроса отличается отвторой.

...