跨域Web工作者？

Question

我有https://domain1.com(domain1)和https://domain2.com(domain2).

Domain2提供包含javascript的页面,标题为"Access-Control-Allow-Origin:*"

Domain1运行一些调用的javascript代码:

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

浏览器抛出安全异常.

自从开始编写这个问题以来,我通过ajaxing脚本,使用blobbing并从中运行它来解决这个问题,但是我在原始想法中遗漏了什么？

Answer 1

我也有同样的问题,希望这可以帮助你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();

Answer 2

注意：自 Chrome v93+ 以来似乎不起作用，但John Hou的解决方案非常有效！（尽管现在使用它来fetch检索代码比使用更容易XMLHttpRequest）

这很有趣，但是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);

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

Answer 3

注意:作为Worker构造函数的参数传递的URI必须遵循同源策略.目前,浏览器供应商对于哪些URI是同源的存在分歧; ...

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

HTML5 Worker是一个相当新的概念,我不确定同源原因是如何应用的,但是,如果您可以控制运行它的服务器XmlHttpRequest,则可以访问不同域上的资源.上外部域资源经由访问预检请求意味着首先将OPTIONS请求被发送到资源,并且如果到该响应具有适当的访问控制报头(,作为最低),则该请求被重复与原来的方法和接收该资源作出回应.Access-Control-Allow-MethodsAccess-Control-Allow-Origin

Answer 4

您是否设置了允许方法？

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

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