Question

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

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

注意：作为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作为最低要求），然后使用原始方法重复请求，并在响应中接收资源。

Answer 3

这很有趣，但是工作人员内部的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 4

您是否设置了允许方法？

尝试将此添加到标题中：

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

跨域Web工作者？

4 个答案: