在啟用同源 CORS 以允許 SharedArrayBuffer 后，web 工作文件的 304 ERR_BLOCKED_BY_RESPONSE

Question

我正在為我的 web 應用程序做一些多線程處理以提高性能，但我偶然發現了一個令人頭疼的問題。 我目前正在 Chrome 上的 localhost（vite 服務器）上開發。

基本上我已經產生了一個 web 工人。 然后我創建了一個 SharedArrayBuffer。

起初，SharedArrayBuffer 收到一個未定義的錯誤。 我發現它被禁用，除非你指定你只想在 cors 上允許同源。 所以我將這些標頭添加到我的 vite 服務器：

        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Cross-Origin-Opener-Policy': 'same-origin',

它解決了 SharedArrayBuffer 的問題。 但是后來，我開始為我的工人收到 304 錯誤

GET http://localhost:5001/js/searchWorker.js net::ERR_BLOCKED_BY_RESPONSE 304

如果我允許使用通配符進行跨域，則 web 工作人員可以工作，但共享數組緩沖區不能。 反之亦然。 我也不太明白，因為它不應該允許 searchWorker.js 因為它位於同一來源（本地主機）嗎？

我真的不明白如何解決這個問題！

謝謝！

Answer 1

源由URL 的方案（協議）+主機名（域）+端口的組合定義。

我有一段時間沒有使用 vite，但我認為您的 web 頁面和 web 工作人員在不同的端口（可能是 8080 和 5001？）上提供服務，因此它們位於不同的來源。 這可以解釋為什么如果您添加通配符，web 工作程序可以工作。

另一方面，使用通配符允許跨域獲取會阻止您實現跨域隔離狀態，如果您想使用SharedArrayBuffer ，這是一個要求。

由於 web 工作腳本是跨域資源，因此獲取它是跨域獲取，除非您明確選擇加入（即您告訴瀏覽器可以獲取該資源），否則跨域隔離會阻止它。

來自使用 COOP 和 COEP 使您的網站“跨域隔離”一文：

對於使用COEP: require-corp服務的文檔或工作人員，未加載 CORS 的跨域子資源必須設置Cross-Origin-Resource-Policy: cross-origin header 以選擇嵌入。 例如，這適用於<script> 、 importScripts 、 <link> 、 <video> 、 <iframe>等。

我認為解決方案是配置 vite 開發服務器以添加Cross-Origin-Resource-Policy: cross-origin response header 到工作腳本。

另請參閱以下鏈接：

• 啟用跨域隔離的指南
• Web worker 被 self.crossOriginIsolated 阻止在 Cypress