解决办法

前端本地测试vue.config.js

server: {
  headers: {
    "Cross-Origin-Opener-Policy": "same-origin",
    "Cross-Origin-Embedder-Policy": "require-corp",
  },
},

后端vue.js生产环境

跨域隔离

是一种现代Web安全策略，旨在增强网页的安全性，特别是对于那些需要使用敏感API（如SharedArrayBuffer，用于实现高性能的并行计算或精确的时间测量）的场景。

HTTP响应头配置

1. Cross-Origin-Opener-Policy (COOP)：控制文档是否与其他窗口共享浏览上下文，防止窗口间恶意操作。
2. Cross-Origin-Embedder-Policy (COEP)：确保页面只能加载那些明确允许被嵌入的跨源资源，增强了资源加载的安全性。

COOP（跨源开放者政策）

COOP（Cross-Origin-Opener-Policy）用于确保顶级文档不会与跨源文档共享浏览上下文组。通过配置COOP，可以防止潜在攻击者在弹出窗口中打开文档时访问全局对象，从而防止跨源攻击（如XS Leaks）。

1. 配置方法

   • 在主文档的HTTP响应头中添加Cross-Origin-Opener-Policy头部。
   • 可选值包括：
     • unsafe-none：默认值，允许文档添加到其打开程序的浏览上下文组中。
     • same-origin：将浏览上下文专门隔离到相同的源文档，跨源文档不会在同一浏览上下文中加载。
     • same-origin-allow-popups：保留对新打开的窗口或选项卡的引用，这些窗口或选项卡要么不设置COOP，要么通过将COOP设置为unsafe-none而选择退出隔离。

Cross-Origin-Opener-Policy: same-origin

COEP（跨源嵌入程序策略）

COEP（Cross-Origin-Embedder-Policy）用于阻止文档加载任何未显式授予文档权限的跨源资源。通过配置COEP，可以确保站点仅加载明确标记为可共享的跨域资源或同域资源，从而提高安全性。

1. 配置方法

   • 在主文档的HTTP响应头中添加Cross-Origin-Embedder-Policy头部。
   • 可选值包括：
     • unsafe-none：默认值，允许文档获取跨源资源，而无需通过CORS协议或Cross-Origin-Resource-Policy头授予显式权限。
     • require-corp：文档只能从同一来源加载资源，或显式标记为可从另一来源加载的资源。

2. 与CORP的配合使用

   • 为了使COEP生效，通常需要配合Cross-Origin-Resource-Policy（CORP）或CORS使用。
   • CORP用于标记资源的跨源策略，而CORS则用于跨源资源共享的授权。

Cross-Origin-Embedder-Policy: require-corp

更多学习

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer