多次响应渲染组件时，Chrome扩展脚本在视频（在Google云存储中）标记中插入跨域属性

Question

我有一个带有标签的React组件，可从Google Cloud Storage加载视频。如果我的组件调用仅一次呈现一次，那么好，但是如果它调用多次呈现，一个名为page.js的google-chome脚本会在我的代码中插入属性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'标头请求的资源。因此，不允许访问来源“ http://localhost:3000”。

我已经在Google存储桶中启用了CORS。

我不知道它是否有帮助，但是执行此操作的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");

我希望我不必弄乱前端，因为我有很多状态变量，并且是一个执行很多事情的复杂组件。

我已经在反应中尝试将shouldcomponentupdate订阅为false，但是它也无法正常工作。

我还注意到，第一个请求的请求标头与第二个请求的请求标头不同。