我在用反应-pdf https://www.npmjs.com/package/react-pdf在我的 Django/Wagtail 网站上内联渲染 PDF 文件。
为此，我在 HTML 模板中创建一个 ID 为 React 的 div，然后运行一个名为index.js这是一个非常简单的 React 文件，它创建一个 DocumentViewer 元素并使用 ReactDom 将其渲染到 id 为“react”的 div。
从我的主包加载工作文件时，在生产环境中运行我的网站时出现错误，特别是有关如何无法从源“example.com”访问脚本worker.js 的错误
确切的代码并不真正相关（尽管我可以在必要时发布它，但给我带来问题的是加载react-pdf工作程序。
我使用以下导入语句作为文档推荐 https://www.npmjs.com/package/react-pdf#enable-pdfjs-worker:
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 and <hash>.worker.js.
The main-<hash>.js文件创建一个像这样的工人：
return new Worker(r.p+"<hash>.worker.js")
当我在本地计算机上运行 Django 安装时，我从本地主机提供静态文件，没有任何问题，这是非常合乎逻辑的，因为所有文件都具有相同的来源。
然而，当我在生产中运行它时，我从 DigitalOcean 空间提供静态文件，Chrome 会产生以下错误：
main-.js:38 未捕获的 DOMException：无法构造“Worker”：
脚本位于
'https://ams3.digitaloceanspaces.com/ https://ams3.digitaloceanspaces.com/-media/static/bundles/.worker.js'
无法从原点访问'https://www.example.com https://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 设置或浏览器处理加载我所缺少的外部脚本的任何其他方式中是否缺少某些内容？
