无法连接MetaMask及代码运行报错问题咨询

一、CORS跨域错误的原因及解决 #

直接通过file://协议打开本地HTML文件时，浏览器会把请求来源识别为null，而ethers.js的CDN资源未配置允许null来源的跨域访问，因此被浏览器的CORS策略拦截。

解决方法：

• 用本地HTTP服务器运行HTML文件，比如安装Node.js的http-server工具，执行http-server命令启动服务；或者用VS Code的Live Server插件启动页面，此时页面会以http://localhost:xxx的方式访问，就不会触发CORS问题。

二、balance未定义错误的原因及解决 #

1. 作用域隔离：balance是在type="module"的脚本里声明的const变量，模块脚本拥有独立作用域，外部的普通<script>无法访问这个变量。
2. await使用不规范：顶层await虽在ES模块中支持，但你没有处理MetaMask的基础连接流程（比如请求用户授权钱包），直接调用getBalance可能因未连接钱包而失败。

修复后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Test ethereum metamask</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="module">
            import { ethers } from "https://cdn.ethers.io/lib/ethers-5.2.esm.min.js";

            async function getWalletBalance() {
                try {
                    // 检查MetaMask是否安装
                    if (!window.ethereum) {
                        alert("请先安装MetaMask钱包");
                        return;
                    }

                    // 请求用户授权连接钱包
                    await window.ethereum.request({ method: 'eth_requestAccounts' });
                    const provider = new ethers.providers.Web3Provider(window.ethereum);
                    // 获取当前连接的账户
                    const signer = provider.getSigner();
                    const account = await signer.getAddress();
                    
                    // 获取账户余额并转换为ETH格式（默认返回wei单位）
                    const balance = await provider.getBalance(account);
                    const balanceEth = ethers.utils.formatEther(balance);
                    
                    // 输出结果并更新页面
                    console.log("========== balance =", balanceEth);
                    document.body.innerHTML = `当前账户: ${account}<br>余额: ${balanceEth} ETH`;
                } catch (error) {
                    console.error("操作失败:", error);
                }
            }

            // 页面加载完成后执行钱包连接逻辑
            window.addEventListener('load', getWalletBalance);
        </script>
    </head>
    <body>
        正在连接MetaMask...
    </body>
</html>

核心修复点说明 #

• 把所有交互逻辑放在模块脚本的async函数内，避免作用域隔离问题；
• 添加MetaMask安装检查和用户授权流程，符合钱包交互的规范；
• 将余额从wei单位转换为ETH格式，提升可读性；
• 直接在模块脚本内处理日志和页面更新，无需依赖外部脚本。

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