浏览器运行Argon2 WASM报错：argon2未定义及MIME类型问题

1. argon2未定义的问题 #

• 先检查HTML里是否正确引入了argon2.js，路径必须和文件实际位置匹配。比如文件在dist目录下，要这么写：

  <script src="./dist/argon2.js"></script>
  

  路径错了的话脚本加载失败，自然找不到argon2对象。
• 如果用ES模块方式开发，得用import引入，不能直接全局调用：

  import argon2 from './dist/argon2.js';
  argon2.hash({pass: 'password', salt: 'somesalt', distPath: 'dist'}).then(console.log);
  

  同时HTML里的脚本标签要加type="module"属性：

  <script type="module" src="./你的脚本文件.js"></script>
  

2. WASM文件MIME类型错误的问题 #

• 要是直接双击HTML文件用file://协议打开，Firefox识别不了WASM的MIME类型，因为本地文件系统不会返回HTTP头。这种情况换本地服务器运行，比如用Python：

  # Python 3
  python -m http.server 8000
  

  然后访问http://localhost:8000测试就行。
• 要是部署到线上服务器，得配置服务器给.wasm文件返回application/wasm类型：
  • Nginx：在配置里加

    types {
      application/wasm wasm;
    }
    

  • Apache：在.htaccess或配置文件里加

    AddType application/wasm .wasm
    

  配置后服务器会返回正确的MIME类型，警告就会消失。

额外要注意的 #

• 确保argon2.wasm的位置和distPath参数一致，比如你设了distPath: 'dist'，那argon2.wasm必须放在dist目录下。
• 打开浏览器控制台的网络标签，确认argon2.js和argon2.wasm都加载成功，没有404错误。

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