HTTP环境下如何解决SharedArrayBuffer不支持的问题？

下面是几个在HTTP环境下可行的解决方案，按实用性和安全性排序：

• 优先用本地localhost访问
  Chrome对localhost或127.0.0.1这类本地源有豁免机制，允许在HTTP协议下使用SharedArrayBuffer，无需配置COOP/COEP，也不会触发源不可信的提示。只要你的Cornerstone应用运行在本地开发服务器（比如http://localhost:8080），直接用这个地址访问即可正常使用。

• 开发环境临时禁用Chrome安全限制
  关闭所有Chrome窗口后，用带参数的命令启动Chrome，完全绕过跨源安全检查：

  • Windows：

    chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
    

  • macOS：

    open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"
    

  • Linux：

    google-chrome --disable-web-security --user-data-dir="/tmp/ChromeDevSession"
    

  注意：这个方法仅适用于开发调试，绝对不能用于生产环境，会带来严重的安全隐患。

• 禁用Cornerstone的SharedArrayBuffer依赖
  部分Cornerstone版本支持通过配置关闭SharedArrayBuffer的使用，改用传统内存实现。初始化Cornerstone时添加对应配置：

  cornerstone.init({
    useSharedArrayBuffer: false
  });
  

  具体配置项请参考你使用的Cornerstone版本文档，不同版本可能有差异。

• 给开发服务器加自签名证书模拟HTTPS
  生成自签名SSL证书，在webpack中配置HTTPS，导入证书到Chrome信任列表后，浏览器会认可该源，COOP/COEP头就能正常生效：

  1. 用openssl生成证书：

     openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
     

  2. 修改webpack.config.js的devServer配置：

     const fs = require('fs');
     
     module.exports = {
       // 其他配置项
       devServer: {
         https: {
           key: fs.readFileSync('./key.pem'),
           cert: fs.readFileSync('./cert.pem'),
         },
         headers: {
           'Cross-Origin-Opener-Policy': 'same-origin',
           'Cross-Origin-Embedder-Policy': 'require-corp'
         }
       }
     };
     

  3. 将生成的cert.pem导入Chrome的「受信任根证书颁发机构」列表，重启Chrome后通过https://localhost:8080访问应用。

内容的提问来源于stack exchange，提问作者adrian