Question

是。这是一个复杂的问题。我会尽量简短地说明一下。

我的网站从s3获取资源。当有人进行谷歌查询时，我还有一个扩展需要预取s3文件，所以稍后当他们进入我的网站时，资源会被缓存。在这一点上，我应该强调我没有做任何恶意的事情。只是用户体验的问题。我的问题是。从扩展（从内容脚本或后台）到s3发出ajax请求不会发送原始标头。这意味着在没有allow origin标头的情况下下载和缓存资源。 S3 不添加allow-origin：*如果请求中没有原点。所以稍后，在我的网站上由于缓存文件中缺少allow-origin标头而失败： - （

有关预取浏览器缓存的更好方法的任何想法吗？

有没有办法强制ajax请求发送源？任何来源？由于我在s3存储桶上有一个allow-origin：*，我认为任何来源都会接受null。感谢

编辑：使用Rob W的解决方案之一结束。你太棒了。让我评论他建议的每个选项：

不要在我的清单上添加主机提示 - 聪明的想法，但不适合我，因为我有一个在任何网站上运行的内容脚本，所以我必须使用一个全能通配符，我不要我认为有一个“排除”许可选项。
我试了一下，它发出了一个空原点，正如预期的那样，最终在S3中根据需要发送allow-origin：*头。这意味着我没有得到“allow-origin header missing”错误，但是文件不会从缓存中提供。我想它实际上是从chrome中的缓存提供的，这必须是完全相同的起源。所以非常接近但不够。
第三种选择是魅力。这是最简单的。我不知道我能够操纵原始标题。所以我这样做，并设置我的网站的确切来源 - 它的工作原理。该文件被缓存，稍后从缓存中提供。我必须强调，我必须添加一个Url过滤器才能将其应用于发送到我的s3存储桶的请求，否则我预计会对用户的浏览器造成严重破坏。

感谢。做得好

Answer 1

你有三个选择：

不要将S3的主机权限添加到清单文件中。然后，扩展程序将不具有访问资源的一揽子权限，并且将随请求一起发送Origin请求标头。

使用非扩展帧来执行AJAX请求。例如，以下方法将导致具有Origin: null的跨源GET请求。

function prefetchWithOrigin(url) {
    var html = '<script>(' + function(url) {
        var x = new XMLHttpRequest();
        x.open('GET', url);
        x.onloadend = function() {
            parent.postMessage('done', '*');
        };
        x.send();
    } + ')(' + JSON.stringify(url) + ');</script>';
    var f = document.createElement('iframe');
    f.src = 'data:text/html,' + encodeURIComponent(html);
    (document.body || document.documentElement).appendChild(f);
    window.addEventListener('message', function listener(event) {
        // Remove frame upon completion
        if (event.source === f.contentWindow) {
            window.removeEventListener('message', listener);
            f.remove();
        }
    });
}

使用chrome.webRequest.onBeforeSendHeaders事件手动附加Origin标头。

cors + s3 +浏览器缓存+ chrome扩展

1 个答案: