为什么我可以获取此跨源文件，但无法从中创建 Worker？答案

【问题标题】：Why can I fetch this Cross origin file but I can't create a Worker from it?为什么我可以获取此跨源文件，但无法从中创建 Worker？
【发布时间】：2020-07-01 03:39:01
【问题描述】：

有问题的文件是这个：http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js

文件托管在允许任何域获取文件的 s3 存储桶中。我还设置了以下 CORS 策略：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

您可以在任何网站的控制台中试用（例如，在 stackoverflow 上打开开发工具）。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:;
      console.log(xhttp.responseText)
    }
};
xhttp.open("GET", "http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js", true)
xhttp.send()

但是直接用它来构造Worker会报错：

> new Worker("http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js")

VM1925:1 Uncaught DOMException: Failed to construct 'Worker': Script at 'http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js' cannot be accessed from origin 'https://stackoverflow.com'.
    at <anonymous>:1:1
(anonymous) @ VM1925:1

【问题讨论】：

HTML 规范要求获取 new Worker(url) URL 如果 URL 与调用它的文档的来源不同，则该 URL 将失败。要求的规范文本在html.spec.whatwg.org/multipage/#fetch-a-classic-worker-script 中，其中表示请求模式为same-origin。对于same-origin模式下对非同源URL的请求，需要浏览器抛出。但是，如果您首先使用 importScripts(…) 和相同的 URL 创建一个 Blob，然后从中创建一个 Blob URL，然后使用该 Blob URL 调用 new Worker(…)，它会起作用。见stackoverflow.com/a/60252783/441757

标签： javascript amazon-s3 cors worker-loader

【解决方案1】：

记得Content Security Policy 控制哪些源可以由各种浏览器机制加载。特别是我需要通配符 worker-src 指令：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src

【讨论】：