SharedArrayBuffer is not defined
Uncaught ReferenceError: SharedArrayBuffer is not defined
这个错误通常是因为浏览器的安全策略限制导致的。
SharedArrayBuffer 错误原因
SharedArrayBuffer需要特殊的浏览器安全设置才能使用，主要是因为安全漏洞（如 Spectre 攻击）的原因，现代浏览器默认禁用了它。
跨源隔离（Cross-Origin Isolation）
要在浏览器中使用SharedArrayBuffer，必须启用跨源隔离。这需要在服务器响应头中设置以下两个头部：
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
或更宽松的配置
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: same-origin
使用本地服务器而非文件协议
不要直接双击 HTML 文件打开（file:// 协议），而是使用本地服务器。
本地开发时的快速解决方案
第一步：Chrome 浏览器禁用 Web 安全
启动 Chrome 时添加以下标志：
bash
chrome --disable-web-security --user-data-dir=/tmp/chrome-test在Windows系统上启动 Chrome 并添加标志的方法：
方法1：使用 CMD 命令行（最简单）
按
Win + R，输入cmd，回车在 CMD 中输入：
cmd
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\temp\chrome-test"方法2：在 PowerShell 中正确的语法
powershell
& "C:\Program Files\Google\Chrome\Application\chrome.exe" "--disable-web-security" "--user-data-dir=C:\temp\chrome-test"或者：
powershell
Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" -ArgumentList "--disable-web-security", "--user-data-dir=C:\temp\chrome-test"验证是否成功
启动后，你应该看到 Chrome 顶部的警告横幅：
text
您使用的是不受支持的命令行标记：--disable-web-security。稳定性和安全性会有所下降。
后续页面打开都在这个新弹出的窗口中进行测试
其他方式：创建快捷方式
右键点击 Chrome 快捷方式，选择"属性"
在"目标"字段的末尾添加：
text
--disable-web-security --user-data-dir="C:\temp\chrome-test"
完整的目标路径应该类似：
text
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\temp\chrome-test"
点击"应用"，然后双击此快捷方式启动
或者使用 Chrome 扩展程序（推荐，但可能无法获取）
安装这些扩展可以绕过 CORS 限制：
Allow CORS: Access-Control-Allow-Origin
Chrome Web Store 链接：
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf安装后，点击图标开启/关闭
Moesif CORS
功能更强大，可以自定义配置
链接：
https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc
HTTPS要求
请注意，大多数浏览器要求使用HTTPS才能启用SharedArrayBuffer（localhost除外）。
即使禁用了 Web 安全，SharedArrayBuffer仍然需要特定的 HTTP 头部才能启用。
浏览器的警告横幅只是禁用了 CORS，但没有设置必要的 COOP/COEP 头部。
第二步：必须设置正确的响应头（使用本地服务器并设置头部）
1、使用 Node.js + Express
javascript
// server.js const express = require('express'); const app = express(); const path = require('path'); // 设置必需的头部 app.use((req, res, next) => { res.setHeader('Cross-Origin-Opener-Policy', 'same-origin'); res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp'); res.setHeader('Access-Control-Allow-Origin', '*'); next(); }); app.use(express.static('.')); app.listen(8080, () => { console.log('Server running at http://localhost:8080/'); console.log('Headers set: COOP=same-origin, COEP=require-corp'); });运行：
bash
node server.js
安装 Express
# 临时使用淘宝镜像安装
npm install -g express --registry=https://registry.npmmirror.com# 或者设置永久使用淘宝镜像
npm config set registry https://registry.npmmirror.com# 验证配置
npm config get registry
2、使用纯 Node.js（无需额外安装 Express）
创建server.js：
javascript
const http = require('http'); const fs = require('fs'); const path = require('path'); const server = http.createServer((req, res) => { console.log(`${req.method} ${req.url}`); // 设置必需的头部 res.setHeader('Cross-Origin-Opener-Policy', 'same-origin'); res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp'); res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // 处理 OPTIONS 预检请求 if (req.method === 'OPTIONS') { res.writeHead(200); res.end(); return; } // 确定请求的文件路径 let filePath = '.' + req.url; if (filePath === './') { filePath = './worker.html'; // 默认加载你的 HTML 文件 } // 获取文件扩展名 const extname = path.extname(filePath); let contentType = 'text/html'; // 根据扩展名设置 Content-Type switch (extname) { case '.js': contentType = 'text/javascript'; break; case '.css': contentType = 'text/css'; break; case '.json': contentType = 'application/json'; break; case '.png': contentType = 'image/png'; break; case '.jpg': contentType = 'image/jpg'; break; case '.wasm': contentType = 'application/wasm'; break; } // 读取文件 fs.readFile(filePath, (error, content) => { if (error) { if (error.code === 'ENOENT') { // 文件不存在 fs.readFile('./404.html', (err, notFoundContent) => { if (err) { res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('404 Not Found\n'); } else { res.writeHead(404, { 'Content-Type': 'text/html' }); res.end(notFoundContent, 'utf-8'); } }); } else { // 服务器错误 res.writeHead(500); res.end('Server Error: ' + error.code); } } else { // 成功响应 res.writeHead(200, { 'Content-Type': contentType, 'Content-Length': content.length }); res.end(content, 'utf-8'); } }); }); const port = 8080; server.listen(port, () => { console.log(`Server running at http://localhost:${port}`); console.log('Required headers are set:'); console.log(' Cross-Origin-Opener-Policy: same-origin'); console.log(' Cross-Origin-Embedder-Policy: require-corp'); console.log(' Access-Control-Allow-Origin: *'); console.log('\nOpen your browser to: http://localhost:8080/worker.html'); });3、使用 Python（最简单，无需网络）
如果你安装了 Python3（WSL Ubuntu 通常自带）：
bash
# 创建 Python 服务器脚本 cat > sab_server.py << 'EOF' import http.server import socketserver import os PORT = 8080 class SharedArrayBufferHandler(http.server.SimpleHTTPRequestHandler): def end_headers(self): # 设置 SharedArrayBuffer 必需的头部 self.send_header('Cross-Origin-Opener-Policy', 'same-origin') self.send_header('Cross-Origin-Embedder-Policy', 'require-corp') self.send_header('Access-Control-Allow-Origin', '*') super().end_headers() def log_message(self, format, *args): # 简化日志输出 print(f"[{self.log_date_time_string()}] {self.address_string()} - {format%args}") # 切换到脚本所在目录 script_dir = os.path.dirname(os.path.abspath(__file__)) os.chdir(script_dir) print("\n" + "="*50) print("🚀 SharedArrayBuffer Development Server") print("="*50) print(f"📡 URL: http://localhost:{PORT}") print(f"📁 Directory: {script_dir}") print("\n🔧 Headers configured:") print(" • Cross-Origin-Opener-Policy: same-origin") print(" • Cross-Origin-Embedder-Policy: require-corp") print(" • Access-Control-Allow-Origin: *") print("\n📄 Available HTML files:") for file in os.listdir('.'): if file.endswith('.html'): print(f" → http://localhost:{PORT}/{file}") print("\n" + "="*50) print("Press Ctrl+C to stop the server") print("="*50 + "\n") with socketserver.TCPServer(("", PORT), SharedArrayBufferHandler) as httpd: try: httpd.serve_forever() except KeyboardInterrupt: print("\n👋 Server stopped by user") EOF # 运行 Python 服务器 python3 sab_server.py启动步骤
# 1. 进入你的项目目录 cd /mnt/d/code/jinqiu/myStudy # 2. 使用 Python 服务器（如果已安装 Python3） python3 server.py # 3. 或者使用 Node.js 服务器（如果已安装 Node.js） node server.js # 4. 打开浏览器访问 # http://localhost:8080/worker.html # 或 # http://localhost:8080/test-sab.html
验证是否成功
访问http://localhost:8080/worker.html后，按 F12 打开开发者工具，查看：
Network 标签→ 点击你的文件 → 查看 Response Headers
应该能看到：
Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp
建议方案：
使用Python 方案最简单，因为：
WSL Ubuntu 自带 Python3
无需安装任何额外包
自动设置所需头部
直接运行：
cd /mnt/d/code/jinqiu/myStudy python3 sab_server.py一步到位的解决方案
在终端中直接运行这个：
cd /mnt/d/code/jinqiu/myStudy && python3 -c " import http.server as hs, socketserver as ss, os, sys p=8080 class H(hs.SimpleHTTPRequestHandler): def end_headers(self): self.send_header('Cross-Origin-Opener-Policy','same-origin') self.send_header('Cross-Origin-Embedder-Policy','require-corp') self.send_header('Access-Control-Allow-Origin','*') super().end_headers() try: with ss.TCPServer(('',p),H) as s: print(f'✅ Server: http://localhost:{p}') print('🔧 Headers set for SharedArrayBuffer') [print(f'📄 http://localhost:{p}/{f}') for f in os.listdir('.') if f.endswith('.html')] print('🛑 Ctrl+C to stop') s.serve_forever() except: print(f'❌ Port {p} busy. Try: http://localhost:{p+1}') with ss.TCPServer(('',p+1),H) as s: print(f'✅ Now on: http://localhost:{p+1}') s.serve_forever() "
检测支持
在使用 SharedArrayBuffer 之前，最好先检测浏览器是否支持：
// 检查 SharedArrayBuffer 是否可用 if (typeof SharedArrayBuffer === 'undefined') { // 降级方案：使用普通 ArrayBuffer console.warn('SharedArrayBuffer is not available. Using fallback.'); // 创建一个简单的模拟（功能有限） window.SharedArrayBuffer = ArrayBuffer; // 或者根据你的需求调整代码逻辑 // 例如：使用 worker.postMessage 替代共享内存 }完整示例
下面是一个使用 SharedArrayBuffer 的完整示例（需要适当的安全头部）：
// 在代码中检测支持情况 function isSharedArrayBufferSupported() { try { if (typeof SharedArrayBuffer !== 'function') { return false; } // 测试是否可以实际创建 const sab = new SharedArrayBuffer(1); return sab instanceof SharedArrayBuffer; } catch (e) { return false; } } if (!isSharedArrayBufferSupported()) { // 提供降级方案或错误提示 console.error('SharedArrayBuffer is not supported in this environment'); // 提示用户更新浏览器或使用支持的浏览器 }