如何将SQL.js的WASM以Base64形式加载到HTML中规避CORS问题？

正确加载步骤 #

要解决Base64格式WASM的加载问题，核心是先将Base64字符串转换为WebAssembly可识别的二进制缓冲区，再通过sql.js官方提供的初始化方法加载，而非直接调用WebAssembly原生API。

1. Base64转ArrayBuffer
   编写解码函数，将Base64字符串转换为Uint8Array对应的ArrayBuffer：

   function base64ToArrayBuffer(base64) {
     const binaryString = atob(base64);
     const bytes = new Uint8Array(binaryString.length);
     for (let i = 0; i < binaryString.length; i++) {
       bytes[i] = binaryString.charCodeAt(i);
     }
     return bytes.buffer;
   }
   

2. 通过sql.js初始化方法加载
   引入sql.js的JS包装文件（如本地的sql-wasm.js），然后通过initSqlJs方法传入解码后的缓冲区，无需依赖外部服务器：

   <script src="sql-wasm.js"></script>
   <script>
   function base64ToArrayBuffer(base64) {
     const binaryString = atob(base64);
     const bytes = new Uint8Array(binaryString.length);
     for (let i = 0; i < binaryString.length; i++) {
       bytes[i] = binaryString.charCodeAt(i);
     }
     return bytes.buffer;
   }
   
   // 替换为你的完整Base64字符串
   const SQLBASE64 = "AGFzbQEAAAABrQRHYAJ/fwF/YAF/AX....AAJ4BAEHwogQLA4AWUQ==";
   const wasmBuffer = base64ToArrayBuffer(SQLBASE64);
   
   async function initSQL() {
     const SQL = await initSqlJs({
       locateFile: () => wasmBuffer // 直接传入二进制缓冲区
     });
     // 测试数据库操作
     const db = new SQL.Database();
     db.run("CREATE TABLE test (id INT, name TEXT)");
     db.run("INSERT INTO test VALUES (1, 'demo')");
     const result = db.exec("SELECT * FROM test");
     console.log(result);
   }
   
   initSQL();
   </script>
   

错误原因说明 #

• 直接调用WebAssembly.Instance或instantiate会缺少sql.js JS层提供的必要导入对象（如内存管理、文件系统接口），导致格式或对象错误。
• instantiateStreaming仅支持URL加载，无法直接处理本地缓冲区，因此不适用此场景。
• Base64字符串若存在截断或编码错误，会导致WASM格式校验失败，需确保字符串完整。

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