使用CornerStone.js出现的SharedArrayBuffer is NOT supported in your browser

浏览器中输入chrome://flags，进入到experiments功能的开启，开启SharedArrayBuffer

使用功能之前需要开启浏览器的SharedArrayBuffer功能，在进行调试cornerstone的功能时，系统出现了bug 调试代码为：

<script lang="ts" setup>  
import {  
  Enums, getRenderingEngine,  
  RenderingEngine, Types, volumeLoader,  
} from "@cornerstonejs/core";  
import createImageIdsAndCacheMetaData from "../../utils/helpers/createImageIdsAndCacheMetaData";  
import {addDropdownToToolbar, initDemo, setTitleAndDescription} from "@/utils/helpers";  
import {addTool, StackScrollMouseWheelTool, ToolGroupManager, ZoomTool,Enums as csToolsEnums} from "@cornerstonejs/tools";  
import {onMounted} from "vue";  
  
onMounted(()=>{  
  // ======== Set up page ======== //  
  const { MouseBindings } = csToolsEnums;  
  const { ViewportType } = Enums;  
  
  const renderingEngineId = 'myRenderingEngine';  
  const viewportId = 'PROSTATE_X';  
  
// Define a unique id for the volume  
  const volumeName = 'PROSTATE_VOLUME'; // Id of the volume less loader prefix  
  const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use  
  const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id  
  
  const content = document.getElementById('content');  
  console.log(content)  
  const element = document.createElement('div');  
  element.id = 'cornerstone-element';  
  element.style.width = '500px';  
  element.style.height = '500px';  
  element.oncontextmenu = () => false;  
  content.appendChild(element);  
  /**  
   * Runs the demo   */  async function run(){  
    // Init Cornerstone and related libraries  
    await initDemo();  
    addTool(StackScrollMouseWheelTool);  
    addTool(ZoomTool);  
  
    // Using a oblique acquired image to demonstrate the orientation of the volume  
    // in default (acquisition plane mode)    const imageIds = await createImageIdsAndCacheMetaData({  
      StudyInstanceUID:  
          '1.3.6.1.4.1.14519.5.2.1.7009.2403.871108593056125491804754960339',  
      SeriesInstanceUID:  
          '1.3.6.1.4.1.14519.5.2.1.7009.2403.367700692008930469189923116409',  
      wadoRsRoot: 'https://d33do7qe4w26qo.cloudfront.net/dicomweb',  
    });  
  
    // create toolGroup  
    const toolGroup = ToolGroupManager.createToolGroup('myToolGroup');  
    toolGroup.addTool(StackScrollMouseWheelTool.toolName);  
    toolGroup.addTool(ZoomTool.toolName);  
  
    toolGroup.setToolActive(StackScrollMouseWheelTool.toolName);  
    toolGroup.setToolActive(ZoomTool.toolName, {  
      bindings: [  
        {  
          mouseButton: MouseBindings.Secondary,  
        },  
      ],  
    });  
    toolGroup.addViewport(viewportId, renderingEngineId);  
  
    // Instantiate a rendering engine  
    const renderingEngine = new RenderingEngine(renderingEngineId);  
  
    // Create a stack viewport  
    const viewportInput: Types.PublicViewportInput = {  
      viewportId,  
      type: ViewportType.ORTHOGRAPHIC,  
      element,  
      defaultOptions: {  
        orientation: Enums.OrientationAxis.SAGITTAL,  
        background: <Types.Point3>[0.2, 0, 0.2],  
      },  
    };  
  
    renderingEngine.enableElement(viewportInput);  
  
    // Get the stack viewport that was created  
    const viewport = <Types.IVolumeViewport>(  
        renderingEngine.getViewport(viewportId)  
    );  
  
    // Define a volume in memory  
    const volume = await volumeLoader.createAndCacheVolume(volumeId, {  
      imageIds,  
    });  
  
    // Set the volume to load  
    volume.load();  
  
    // Set the volume on the viewport  
    await viewport.setVolumes([{volumeId}]);  
    // Render the image  
    viewport.render();  
  }  
  
  run();  
  
})  
  
</script>  
  
<template>  
  <div id="content">  
   111  
  </div>  
  
</template>  
  
<style scoped>  
  
</style>

在下列代码出现问题

// Define a volume in memory  
    const volume = await volumeLoader.createAndCacheVolume(volumeId, {  
      imageIds,  
    });  

问题为： Error: SharedArrayBuffer is NOT supported in your browser see developer.chrome.com/blog/enabli…

简单来说就是由于JavaScript是单线程的，为了让浏览器更好利用CPU的资源，便引入了Web Workers这个API，提供了多线程的使用方式 默认情况下线程之间的数据是隔离，若想要使用其他线程的数据，必须复制过来。为了解决这个问题，就出现了SharedArrayBuffer这个对象 让线程之间的数据交互效率更高。

解决方法：在vite.config.js中设置headers，注意这里启动地址不能为ip:5173/否则会报错该url不安全，忽略该headers

import { fileURLToPath, URL } from 'node:url'  
  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [  
    vue(),  
  ],  
  resolve: {  
    alias: {  
      '@': fileURLToPath(new URL('./src', import.meta.url))  
    }  
  },  
  server:{  
    //本地运行配置  
    host:"localhost",  
    port:5173,  
    cors:true,  //默认启用并运行所有源  
    open:true,  //在服务器启动时自动在浏览器中打开应用程序  
    devtool:"source-map",  //是否为开发构建启用生产源映射  
    headers:{  //为每个请求添加自定义头  
      "Cross-Origin-Opener-Policy":"same-origin",//保护源站免受攻击  
      "Cross-Origin-Embedder-Policy":"require-corp"//保护源站免受侵害  
  },}  
})

最终渲染结果为：