跨域网络工作者？ [复制]答案

【问题标题】：Cross Domain Web Worker? [duplicate]跨域网络工作者？ [复制]
【发布时间】：2013-12-22 23:46:55
【问题描述】：

我有https://domain1.com（域1）和https://domain2.com（域2）。

Domain2 提供包含带有此标头的 javascript 的页面：

"Access-Control-Allow-Origin: *"

Domain1 运行一些 javascript 代码来调用：

new Worker("//domain2.com/script.js")

浏览器抛出安全异常。

自从开始写这个问题以来，我已经通过 ajaxing 脚本、blobbing 脚本并从中运行它来解决这个问题，但是我在最初的想法中遗漏了什么吗？

【问题讨论】：

有一个重复的here 和here，但似乎没有一个有明确的答案。
根据the MDN page，使用 ajax - 数据 URL 方法不适用于所有浏览器。
据我从 W3C 规范中得知，这些规则暗示工作脚本确实必须来自与拥有页面相同的域。我认为甚至没有检查 CORS 标头。
@Pointy Figures，因为网络选项卡甚至不建议它甚至获取要检查的页面。那么如果AJAX可以做到，为什么我们不能直接做到呢？ ://
我不知道其工作方式背后的基本原理。就 ajax 而言，这是一个较旧的标准。再次注意，使用该解决方法不一定有效，因为某些浏览器会认为您构建的数据 URL 不算作网络工作者的“同源”。

标签： javascript html cross-domain web-worker

【解决方案1】：

注意：自 Chrome v93+ 起似乎不起作用，但John Hou 的解决方案就像一个魅力！（虽然现在使用fetch 来检索代码比XMLHttpRequest 更容易）

挺搞笑的，但是worker内部的importScripts()没有同源限制。所以我使用了这个简单的解决方法：

const workerUrl = 'https://domain2.com/script.js';
const workerBlob = new Blob([
    'importScripts(' + JSON.stringify(workerUrl) + ')',
], {type: 'application/javascript'});
const blobUrl = window.URL.createObjectURL(workerBlob);
const worker = new Worker(blobUrl);

比手动获取脚本要简单一些。

【讨论】：

【解决方案2】：

我也有同样的问题，希望对你有帮助https://gist.github.com/jtyjty99999/a730a17258fca04bfca3

 function XHRWorker(url, ready, scope) {
      var oReq = new XMLHttpRequest();
      oReq.addEventListener('load', function() {
          var worker = new Worker(window.URL.createObjectURL(new Blob([this.responseText])));
          if (ready) {
              ready.call(scope, worker);
          }
      }, oReq);
      oReq.open("get", url, true);
      oReq.send();
  }

  function WorkerStart() {
      XHRWorker("http://static.xxx.com/js/worker.js", function(worker) {
          worker.postMessage("hello world");
          worker.onmessage = function(e) {
              console.log(e.data);
          }
      }, this);
  }

  WorkerStart();

【讨论】：

请注意，这不适用于 IE11 及以下版本。那组浏览器会抛出一个SecurityError。
哇，喜欢这个解决方案。尤其是链接new Blob 和URL.createObjectURL。不知道这是可能的。

【解决方案3】：

注意：作为 Worker 构造函数的参数传递的 URI 必须遵守同源政策。目前各方意见不一浏览器供应商关于哪些 URI 是同源的； ...

引用https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers

HTML5 Worker 是一个相当新的概念，我不确定如何应用同源异常，但是，使用 XmlHttpRequest，如果您可以控制它运行的服务器。外部域上的资源通过preflighted requests 访问，这意味着首先向资源发送一个 OPTIONS 请求，并且如果对它的响应具有适当的访问控制标头（至少Access-Control-Allow-Methods，Access-Control-Allow-Origin），则重复该请求使用原始方法并接收资源作为响应。

【讨论】：

这是真的。但是，从 Web Worker 脚本获取过程的描述来看，用户代理是否应该检查标头尚不清楚。它只是强制从拥有页面的来源获取 URL，并设置“强制同源标志”以确保重定向不会影响它。
我不确定...引用的文档说“此外，他们可以使用 XMLHttpRequest 执行 I/O ...”。鉴于此，我假设底层传输仍然是标准 HTTP 请求。
哦，是的，我认为这是真的。但是spec 向我建议用户代理应该只从“所有者来源”获取脚本。
关于 owner origin 的规范不明确。显然，MDN 文档说“作为 Worker 构造函数的参数传递的 URI 必须遵守同源策略”并且关于同源策略，它说在某些条件下允许跨域访问：developer.mozilla.org/en-US/docs/Web/JavaScript/…
这是有道理的，因为限制跨域访问的目的是防止当资源的所有者不希望它被访问时访问它。但是如果你是多个origin的所有者，你可以在它们之间交叉访问资源。

【解决方案4】：

您是否设置了允许方法？

尝试将其添加到您的标题中：

Access-Control-Allow-Methods: POST, GET, OPTIONS

【讨论】：