1、起因：

一些Web API会增加诸如Spectre之类的旁道攻击的风险，为了减轻这种风险，浏览器提供了一种基于选择加入的隔离环境，称为跨域隔离。在跨域隔离状态下，该网页将能够使用以下特权功能：

SharedArrayBuffer	WebAssembly线程必需。这可从Android Chrome 88中获得。桌面版本当前默认情况下是借助Site Isolation启用的，但是将需要跨域隔离状态，并且默认情况下会在Chrome 91中被禁用。
performance.measureUserAgentSpecificMemory()	可从 Chrome 89 获得
JS Self-Profiling API	Not available in any browsers yet.
performance.now(), performance.timeOrigin	当前可在许多浏览器中使用，分辨率限制为100微秒或更高。使用跨域隔离时，分辨率可以为5微秒或更高

跨域隔离状态还可以防止修改document.domain。总之跨域隔离可以使网页使用更强大的功能

2、需注意的地方：

执行此操作后，除非资源通过Cross-Origin-Resource-Policy标头或CORS标头（Access-Control-Allow- *等）明确允许，否则页面将无法加载跨域内容。

https://blog.chromium.org/2021/02/restriction-on-sharedarraybuffers.html

3、关键术语

二、启用跨域隔离方法

1 、将 Cross-Origin-Opener-Policy: same-origin 和 Cross-Origin-Embedder-Policy: require-corp 标头设置在 http 请求头上。（ COOP 和 COEP ）

2、检查控制台中是否self.crossOriginIsolated返回true，以验证您的页面是跨域隔离的。

三、分析跨域隔离冲击

https://web.dev/cross-origin-isolation-guide/

1、设置Cross-Origin-Opener-Policy-Report-Only:same-origin在您的顶级文档上。正如其名称所示，这个头只发送有关影响报告到您的网站，它不会禁止与实际弹出窗口进行通信。

2、设置报告并配置Web服务器以接收和保存报告。

3、设置Cross-Origin-Embedder-Policy-Report-Only:require-corp在您的顶级文档上。同样，此标头可让您查看启用的影响，而实际上并未影响网站的功能。您可以配置此标头，以将报告发送到上一步中设置的同一报告服务器。

四、减轻跨域隔离影响

1、CORP

①如果希望仅从同一来源加载资源，请设置Cross-Origin-Resource-Policy: same-origin标头。

②如果希望仅从同一站点但跨源加载资源，请设置Cross-Origin-Resource-Policy: same-site标题。

③如果资源是在您的控制下从交叉原点加载的，Cross-Origin-Resource-Policy: cross-origin则在可能的情况下设置标头。

2、CORS

对于您无法控制的跨源资源：

①如果资源与CORS一起使用，请使用加载HTML标记中的属性。

如果使用CORS服务资源，则在顶级文档的HTML标记中设置crossorigin属性，例如：<img src=“example.jpg” crossorigin>。

②要求资源所有者支持CORS或CORP

3、内部框架

对于内部框架，使用CORP和COEP头如下：Cross-Origin-Resource-Policy: same-origin（或者same-site，cross-origin取决于上下文）和Cross-Origin-Embedder-Policy: require-corp。

4、iFrame

如果加载到iframe中的跨域资源涉及iframe的另一层，请在继续操作之前递归应用本节中介绍的步骤。

确认选择了所有跨域资源后，Cross-Origin-Embedder-Policy: require-corp在加载到iframe中的跨域资源上设置标头。

5、弹出窗口

确保没有跨域弹出窗口要求通过进行通信postMessage()。启用跨域隔离后，无法使其保持工作状态。您可以将通信移至不是跨域隔离的另一个文档，或使用其他通信方法（例如HTTP请求）。

6、Demo示例

https://first-party-test.glitch.me/?coep=require-corp&coop=same-origin&

跨域资源共享（CORS）

https://web.dev/cross-origin-resource-sharing/

在现代Web应用程序中，应用程序通常希望从其他来源获取资源。例如，您要从其他域检索JSON数据，或将另一个站点的图像加载到<canvas>元素中。换句话说，有公共资源可供任何人阅读，但是同源策略阻止了该资源。开发人员使用了JSONP之类的变通办法，但是 跨域资源共享（ CORS ）以标准方式解决了此问题 。

一、CORS如何运作？

请记住，同源策略告诉浏览器阻止跨域请求。当您要从其他来源获取公共资源时，资源提供服务器需要告知浏览器“请求来源来自此来源可以访问我的资源”。浏览器会记住这一点，并允许跨域资源共享。

步骤1：客户端（浏览器）请求

当浏览器发出跨域请求时，浏览器将添加 Origin 具有当前来源（方案，主机和端口）的标头。

步骤2：服务器回应

在服务器端，当服务器看到此标头并准备允许访问时，它会在响应中添加标头 Access-Control-Allow-Origin 以指定请求的来源（或 * 允许任何来源）。

步骤3：浏览器收到响应

当浏览器看到带有 Access-Control-Allow-Origin 标题的响应时，浏览器将允许响应数据与客户端站点共享。

二、分享凭据CORS

出于隐私方面的考虑，CORS通常用于“匿名请求”，即那些不能识别请求者的请求。如果要在使用CORS时发送 cookie （凭证：可以识别发件人） ，则需要向请求和响应中添加其他标头。

credentials: 'include'如下所示添加到获取选项。这将在请求中包含cookie。

fetch('https://example.com', {
  mode: 'cors',
  credentials: 'include'
Access-Control-Allow-Origin必须设置为特定来源（不得使用通配符*），并且必须设置Access-Control-Allow-Credentials为true。 
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true 
三、复杂的HTTP调用预检要求 
如果Web应用程序需要复杂的HTTP请求，则浏览器会将预检请求添加到请求链的前面。 
CORS规范将复杂的请求定义为 
1、使用GET，POST或HEAD以外的方法的请求 
2、包括其它标题比的请求Accept，Accept-Language或Content-Language 
3、具有的请求Content-Type比其它标头application/x-www-form-urlencoded，multipart/form-data或text/plain 
使用COOP和COEP使您的网站跨域隔离 
https://web.dev/coop-coep/ 
一、控制面板的使用 
对于在屏幕上呈现的资源（例如图像），检测COEP问题相当容易，因为请求将被阻止并且页面将指示缺少图像。但是，对于不一定具有视觉影响的资源（例如脚本或样式），COEP问题可能不会引起注意。对于这些，请使用“ DevTools网络”面板。如果COEP有问题，您应该(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)在“状态”列中看到。 
二、查看HTTP头 
在页面空白处右键->检查->打开NetWork->刷新页面->在Name一栏任意选择一个文件，即可出现HTTP头相关信息。 
三、Application面板 
1、您还可以通过“应用程序”面板确定iframe和弹出窗口的状态。转到左侧的“框架”部分，然后展开“顶部”以查看资源结构的细分。可以检查iframe的状态，例如“ SharedArrayBuffer”的可用性等。 
2、您还可以检查弹出窗口的状态，例如是否跨域隔离。 
四、观察使用Reporting API问题 
该报告API是另一种机制，通过它可以检测各种问题。您可以配置Reporting API，以指示您的用户浏览器在COEP阻止加载资源或COOP隔离弹出窗口时发送报告。Report-To从版本69开始，Chrome就支持该标头，可用于多种用途，包括COEP和COOP。
                    跨域隔离指南一、跨域隔离介绍https://web.dev/coop-coep/1、 起因：一些Web API会增加诸如Spectre之类的旁道攻击的风险，为了减轻这种风险，浏览器提供了一种基于选择加入的隔离环境，称为跨域隔离。在跨域隔离状态下，该网页将能够使用以下特权功能：			SharedArrayBuffer									WebAssembly线程必需。这可从Android Chrome 88中获得。桌面版本当前默认情况下是借助Site Isolation启用的，但是将
					解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%
				最近的项目使用springboot+react架构实现的，是前后端完全分离的，在联调的时候遇到跨域问题。
现在项目中，使用前后端分离架构的越来越多，但是前后端分离联调的时候会存在跨域的问题。
当然如果只是为了访问，可以添加@CrossOrigin 注解来解决，但是如果在项目中使用的有cookie，那就不行了，因为cookie只能在一个域中使用。
Nginx是一个高性能的HTTP和反向代理w...
在axios的headers中添加
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp"
并且在vue.config.js的devServer添加
headers: {"Cross-
				为了实验，我们开2个Web服务器，一个监听在3000另一个监听3001端口，不妨称作站点A和站点B。下图是B站点通过AJAX访问A站点，可以看到有报错。
这是因为浏览器为了安全目的阻止了这个「跨站请求」，我们把这个策略叫做same origin policy。为了绕开这个限制，有一个规范：Cross-Origin Resource Sharing (CORS)。
CORS的基本原理是这样的。
				对于Superset跨域的问题，你可以尝试以下几种方法来解决：
1. 配置Superset的CORS（跨源资源共享）设置：在Superset的配置文件（superset_config.py）中，添加以下配置：
```python
# 允许的跨域源
CORS_ALLOW_ORIGIN = '*'
# 允许的跨域请求头
CORS_ALLOW_HEADERS = 'Content-Type'
# 允许的跨域请求方法
CORS_ALLOW_METHODS = 'GET, POST, PUT, DELETE, OPTIONS'
请注意，设置`CORS_ALLOW_ORIGIN`为`'*'`表示允许所有来源的跨域请求，这可能存在安全风险，你可以根据实际需求进行更严格的设置。
2. 使用反向代理服务器：将Superset部署在一个反向代理服务器（如Nginx）后面，并配置该服务器以处理跨域请求。具体步骤如下：
- 在Nginx的配置文件中，添加以下配置：
```nginx
location / {
  # 允许的跨域源
  add_header 'Access-Control-Allow-Origin' '*';
  # 允许的跨域请求头
  add_header 'Access-Control-Allow-Headers' 'Content-Type';
  # 允许的跨域请求方法
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
  proxy_pass http://superset-backend;
- 然后，在Superset的配置文件（superset_config.py）中，将`SUPERSET_WEBSERVER_ADDRESS`设置为反向代理服务器的地址。
3. 在Superset的启动命令中配置：如果你使用的是superset启动命令来启动Superset服务，可以通过添加参数来配置跨域设置，例如：
```shell
superset run -p 8088 --with-threads --enable-cors
以上是几种常见的处理Superset跨域问题的方法，你可以根据自己的需求选择适合的方法来解决。希望对你有帮助！如果还有其他问题，请继续提问。

1、 起因：