使用位于其他域的 JS 工作文件构建“工作人员”失败

Question

我正在使用react-pdf在我的 Django/Wagtail 网站上内联渲染 PDF 文件。

为此，我在 HTML 模板中创建一个 ID 为 React 的 div，然后运行一个名为的文件，index.js这是一个非常简单的 React 文件，它创建一个 DocumentViewer 元素并使用 ReactDom 将其渲染到 ID 为“react”的 div。

从我的主包加载工作文件时，在生产环境中运行我的网站时出现错误，特别是有关如何无法从源“example.com”访问脚本worker.js 的错误

确切的代码并不真正相关（尽管我可以在必要时发布它，但给我带来问题的是加载react-pdf工作程序。

我按照文档的建议使用以下导入语句：

import {Document, Outline, Page} from 'react-pdf/dist/entry.webpack';

然后，我使用 webpack 捆绑并缩小该文件，内容如下webpack.config.js：

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,

  entry: './project/app_name/static/js/index.js',

  output: {
      path: path.resolve('./project/app_name/static/bundles/'),
      publicPath: '/static/bundles/',
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }

};

static/bundles这会在我的 Django 应用程序的文件夹中创建两个文件，main-<hash>.js以及<hash>.worker.js.

该main-<hash>.js文件创建一个像这样的worker：

return new Worker(r.p+"<hash>.worker.js")

当我在本地计算机上运行 Django 安装时，我从本地主机提供静态文件，没有任何问题，这是非常合乎逻辑的，因为所有文件都具有相同的来源。

然而，当我在生产中运行它时，我从 DigitalOcean 空间提供静态文件，Chrome 会产生以下错误：

main-.js:38 Uncaught DOMException: 无法构造“Worker”：无法从源“ https://ams3.digitaloceanspaces.com/-media/static/bundles/.worker.js ”访问脚本“ https://ams3.digitaloceanspaces.com/-media/static/bundles/.worker.js” /www.example.com '.

我已经检查了该空间上的 CORS 标头，一切似乎都按顺序进行。

当我像这样使用curl命令时：

curl -v 'https://ams3.digitaloceanspaces.com/<project>-media/static/bundles/<hash>.worker.js' -X OPTIONS -H "Origin:https://example.com" -H "Access-Control-Request-Method: GET,PUT,HEAD,POST"

我收到 200 OK 响应。

我不知道为什么 Chrome 会拒绝加载这个脚本。

我的 webpack 配置、CORS 设置或浏览器处理加载我所缺少的外部脚本的任何其他方式中是否缺少某些内容？

Answer 1

对于阅读本文的任何人：我弄清楚了问题是什么。

大多数浏览器不允许您从外部源加载Worker，即使CORS标头全部按顺序，脚本加载是从与worker相同的源加载的，并且源在我的控制范围内。

Chrome、Firefox 和 Safari 都给出了不同的错误，这就是为什么我对到底发生了什么感到困惑。

我解决这个问题的方法是不加载外部工作人员，并内联运行代码。

解决此问题的另外两种方法是：

• 从与网页相同的源提供worker.js 文件。
• 通过 blob URL 创建工作人员（如本链接所示）。我使用的工作程序是从我的依赖项内的包加载的，我尝试配置 Webpack 以像这样加载该工作程序，但我无法让它工作。

所以最后我选择根本不加载worker。