I'm looking to do some multithreading for my web application to improve performance and I've stumbled upon a head-scratcher. I'm currently developing on localhost (vite server) on Chrome.
Basically I have spawned a web worker. Then I created a SharedArrayBuffer.
At first, the SharedArrayBuffer was getting an error that it wasn't defined. I found out it is disabled unless you specify that you only want to allow same-origin on cors. So I added these headers to my vite server:
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
It solved the problem with SharedArrayBuffer. But then, I started getting 304 errors for my worker
GET http://localhost:5001/js/searchWorker.js net::ERR_BLOCKED_BY_RESPONSE 304
If I allow cross origin with a wildcard, the web worker works, but the shared array buffer does not. And vice versa. I don't really understand as well because shouldn't it allow searchWorker.js because it's at the same origin (localhost)?
I don't really understand how to fix this issue!
Thanks!
An origin is defined by the combination of scheme (protocol) + hostname (domain) + port of the URL.
I haven't used vite in a while, but I think that your web page and web worker are served on different ports (8080 and 5001 maybe?), so they are on different origins . That would explain why the web worker works if you add a wildcard.
On the other hand, using a wildcard to allow cross-origin fetches prevents you from achieving the status of cross-origin isolation, which is a requirement if you want to use SharedArrayBuffer
.
Since the web worker script is a cross-origin resource, fetching it is a cross-origin fetch, which is blocked by cross-origin isolation unless you explicitly opt-in (ie you tell the browser that is ok to fetch that resource).
From the article Making your website "cross-origin isolated" using COOP and COEP :
For a document or a worker served with
COEP: require-corp
, cross-origin subresources loaded without CORS must set theCross-Origin-Resource-Policy: cross-origin
header to opt into being embedded. For example, this applies to<script>
,importScripts
,<link>
,<video>
,<iframe>
, etc.
I think the solution is to configure the vite dev server to add a Cross-Origin-Resource-Policy: cross-origin
response header to the worker script.
See also these links:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.