CORS 问题，使用带有 blob 的 webworker答案

【问题标题】：CORS issue, using webworker with blobCORS 问题，使用带有 blob 的 webworker
【发布时间】：2016-11-21 16:59:55
【问题描述】：

我正在使用带有 javascript blob 的网络工作者，因为我希望能够缩小项目：

window.URL = window.URL || window.webkitURL;
                var res = elements.worker.toString();
                res = res.substr(res.indexOf("\n")+1,res.length-4-res.indexOf("\n"));
                console.log(res)
                var blob;
                try {
                    blob = new Blob([res], {type: 'application/javascript'});
                } catch (e) { // Backwards-compatibility
                    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
                    blob = new BlobBuilder();
                    blob.append(res);
                    blob = blob.getBlob();
                }
                load.workNode = new Worker(URL.createObjectURL(blob));

在浏览器中我收到 CORS 错误。为什么 webworker 需要 CORS？我已经仔细检查过了。网络工作者导致 CORS 错误。 chrome 和 firefox 都出现同样的错误。

XMLHttpRequest cannot load . Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

在开发环境中，我使用带有 browserfy 的节点。我尝试使用 npm 包 'cors' 启用 CORS；

var cors = require('cors');
var proxy = require('./proxy');

function browserSyncInit(baseDir, files, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === paths.src || (util.isArray(baseDir) && baseDir.indexOf(paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }

  browserSync.instance = browserSync.init(files, {
    startPath: '/',
    server: {
      baseDir: baseDir,
      middleware: [proxy, cors()],
      routes: routes
    },
    port: 4000,
    browser: browser
  });
}

没有成功。我能做什么？

【问题讨论】：

“在浏览器中我得到了 CORS 错误”——错误信息是什么意思？
@Quentin，我已经用错误消息更新了问题。
错误消息说你不能从blob: 协议发出跨域请求...听起来有点奇怪，但解决方法是使用 FileReader，将你的 blob 转换为 dataURI 版本并从此 dataURI 启动您的工作人员。根据消息，data: URI 方案被允许做这样的请求。
Ps：如果它真的有效，你甚至不需要 Blob 和 FileReader：只需对你的脚本内容进行编码（使用 encodeURIComponent）并通过在编码字符串前面加上 data:text/plain; encoding=utf8, 来创建 URI。
PPs：刚刚在 FF 50 和 chrome 54 上尝试过，两者都适用于 blob: 协议...

标签： javascript node.js browserify web-worker

【解决方案1】：

您可以使用 heroku 应用 Cors Anywhere 来解决 Cross-Origin-Request Errors 错误，尚未针对网络工作者进行测试，但值得一试。

https://cors-anywhere.herokuapp.com

只需将上面的 Url 添加到您尝试创建 XMLHttpRequest 的 Url 的开头，让我知道它是否有效，因为我自己目前仍在学习 Node 和 webworkers..

【讨论】：

【解决方案2】：

通常 CORS 请求有一个预请求，询问是否允许该请求。您需要在目标 Web 服务器域请求上指定允许此 CORS 请求。除非您没有这样做，否则 CORS 请求将不起作用。这对于这些请求来说是必不可少的。

您可以通过添加 CORS 允许的标头来做到这一点。在 nginx 或 apache 中，您只需将 .htaccess 文件添加到该目标文件夹即可。我猜在 node.js Web 服务器引擎上有一个等价物。祝你好运！

【讨论】：