cors - Web worker 被 Cypress 上的 self.crossOriginIsolated 阻止

Question

基本上，我正在尝试使用 cypress 在我的 Svelte 应用程序上运行测试。但是我需要使用网络 worker ，但是当我尝试 Cypress(使用 Chrome)时，它被这个错误阻止了:

DOMException: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated.

通常它可以工作，我在 svelte.config.js 文件中设置了以下 header :

/** @type {import('vite').Plugin} */
const viteServerConfig = {
    name: 'log-request-middleware',
    configureServer(server) {
        server.middlewares.use((req, res, next) => {
            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setHeader("Access-Control-Allow-Methods", "GET");
            res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
            res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
            next();
        });
    }
};

在 Cypress 上，为了尝试解决这个问题，我在 cypress.config.js 上将 chromeWebSecurity 设置为 false，但是没有什么改变。如果我查看网络内部，工作人员会正常加载，但发布消息因该错误而失败，有什么线索吗？

Answer 1

我不确定是谁(Vite、Svelte、Cypress)，但您的代码中有些东西想要使用 SharedArrayBuffer .

SharedArrayBuffer是removed from all browsers in 2018因为 Spectre 和 Meltdown 攻击。称为 Site Isolation 的 Chrome 功能允许它返回，只要网站请求使用SharedArrayBuffer处于称为 crossOriginIsolated 的状态.

为了实现跨源隔离，需要配置3个HTTP响应头:

1. Cross-Origin-Resource-Policy (CORP)
2. Cross-Origin-Opener-Policy (COOP)
3. Cross-Origin-Embedder-Policy (COEP)

正如 Eiji Kitamura 在 this video 中解释的那样，你需要做 3 件事:

1. 添加Cross-Origin-Opener-Policy (COOP) 响应 header 到您的服务器返回的顶级文档。它的值应该是 same-origin .
2. 添加Cross-Origin-Resource-Policy (CORP) 对您在源上自托管的所有 Assets 的响应 header 。它的值应该是 same-site .您还应该检查 cross-origin您想要包含在您网站上的资源(例如 YouTube <iframe> )将与 Cross-Origin-Resource-Policy: cross-origin 一起返回.如果跨源服务器(即不受您控制的服务器)未将 CORP header 添加到它返回的资源中，它也可能返回 Cross-Origin Resource Sharing。 (CORS) header ，但您需要添加 crossorigin属性给那些跨源资源(例如 <img src="some-image-not-on-your-site.png" crossorigin> )。
3. 添加Cross-Origin-Embedder-Policy (COEP) 响应 header 到您的服务器返回的顶级文档。它的值应该是 require-corp .

此外，请记住 cross-origin-isolation-guide 中的这一点:

Make sure there are no cross-origin popup windows that require communication through postMessage(). There's no way to keep them working when cross-origin isolation is enabled. You can move the communication to another document that isn't cross-origin isolated, or use a different communication method (for example, HTTP requests).

你也可以看看这个关于 cross-origin fetches 的讨论.