django - 无法使用位于其他域的 JS 工作文件构造 'Worker'

Question

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

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

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

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

我将以下导入语句用作 the docs recommend :

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: Failed to construct 'Worker': Script at 'https://ams3.digitaloceanspaces.com/-media/static/bundles/.worker.js' cannot be accessed from origin 'https://www.example.com'.

我已经检查了那个空间的 CORS header ，一切似乎都井井有条。

当我像这样使用 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 header 都是有序的，脚本加载是从与 worker 相同的源加载的，并且源在我的控制之下。

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

我解决这个问题的方法是不加载外部 worker ，而是内联运行代码。

解决此问题的其他两种方法是:

• 从与网页相同的来源提供 worker.js 文件。
• 通过 blob URL 创建一个 worker(如 this link)。我使用的 worker 是从我的依赖项中的包加载的，我尝试配置 Webpack 以像这样加载这个 worker，但我无法让它工作。

所以最后我选择了完全不加载worker。