无法使用其他域上的JS worker文件构造"Worker" [英] Getting Failed to construct 'Worker' with JS worker file located on other domain
问题描述
我正在使用 react-pdf 在Django上内嵌呈现PDF文件/Wagtail网站.
I am using react-pdf to render a PDF file inline on my Django/Wagtail website.
为此，我在HTML模板中创建了一个ID为react的div，然后运行一个名为 index.js 的文件，这是一个非常简单的React文件，它创建了一个DocumentViewer元素并使用ReactDom将其呈现给ID为'react'的div.
To do this, I create a div in my HTML template with ID react, and I run a file called index.js which is a pretty straightforward React file that creates a DocumentViewer element and uses ReactDom to render it to the div with id 'react'.
从主捆绑包中加载工作文件时，在生产环境中运行网站时出现错误，特别是有关如何无法从来源'example.com'访问脚本worker.js的错误
I get an error when running my website on production when loading the worker file from my main bundle, specifically an error about how script worker.js cannot be accessed from origin 'example.com'
确切的代码并没有真正的意义(尽管我可以在必要时将其发布，但是给我带来麻烦的是加载react-pdf worker.
The exact code is not really relevant (although I can post it if necessary, but the thing that's giving me issues is loading the react-pdf worker.
我将以下导入语句用作文档推荐:
I use the following import statement as the docs recommend:
import {Document, Outline, Page} from 'react-pdf/dist/entry.webpack';
然后我使用webpack通过以下 webpack.config.js 捆绑并缩小该文件:
I then use webpack to bundle and minify this file, with the following 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']
}
};
这将在我的Django应用程序的 static/bundles 文件夹中创建两个文件，分别是 main-< hash> .js 和< hash> .worker.js .
This creates two files in the static/bundles folder of my Django application, main-<hash>.js and <hash>.worker.js.
main-< hash> .js 文件创建了一个如下工作器:
The main-<hash>.js file creates a worker like this:
return new Worker(r.p+"<hash>.worker.js")
在本地计算机上运行Django安装的本地计算机上，当我从本地主机提供静态文件时，就没有问题了，这是合乎逻辑的，因为所有文件的来源都相同.
When I run my Django installation on my local machine, where I serve static files from the localhost there are no issues, which is pretty logical, since all files have the same origin.
但是，当我在生产环境中运行它(从DigitalOcean空间提供静态文件)时，Chrome会产生以下错误:
However when I run it in production, where I serve my static files from a DigitalOcean space, Chrome produces the following error:
main-.js:38未捕获的DOMException:无法构造'Worker':脚本在' https://ams3.digitaloceanspaces.com/ -media/static/bundles/.worker.js'无法从来源" https://www.example.com "访问.
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标头，一切似乎都井然有序.
I have already checked the CORS headers on that space, and everything seems to be in order.
当我像这样使用curl命令时:
When I use the curl command like this:
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响应.
I get a 200 OK response.
我不知道为什么Chrome会拒绝加载此脚本.
I have no idea why Chrome would reject the loading of this script.
我的Webpack配置，CORS设置或浏览器处理加载我丢失的外部脚本的任何其他方式中是否缺少某些内容?
Is there something I'm missing in my webpack config, CORS settings or any other way browsers handle loading external scripts that I'm missing?
推荐答案
对于阅读本文的任何人:我想出了问题所在.
For anyone reading this: I figured out what the problem is.
大多数浏览器都不允许您从外部源加载Worker，即使CORS标头都按顺序排列，脚本加载是从与worker相同的源进行加载的，并且该源在我的控制之下.
Most browsers don't allow you to load a Worker from an external source, even if the CORS headers are all in order, the script loading is loaded from the same source as the worker, and the source is in my control.
Chrome，Firefox和Safari都给出了不同的错误，这就是为什么我对到底发生了什么感到困惑.
Chrome, Firefox, and Safari all gave different errors, which was why I was confused as to what exactly happened.
我解决此问题的方法是不加载外部工作程序，并内联运行代码.
The way I fixed this was by not loading the external worker, and running the code inline.
其他两种解决方法:
- 从与网页相同的来源提供worker.js文件.
- 通过Blob URL创建工人(如此链接).我使用的工作程序是从依赖项中的程序包中加载的，我尝试将Webpack配置为像这样加载此工作程序，但我无法使其正常工作.
- Serving the worker.js file from the same origin as the webpage.
- Creating a worker through a blob URL (Like in this link). The worker I used was loaded from a package inside my dependencies, I tried to configure Webpack to load this worker like this, but I could not get it to work.
所以最终我选择了完全不加载工作程序.
So in the end I opted for not loading the worker at all.
这篇关于无法使用其他域上的JS worker文件构造"Worker"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
