Fitbit API本地调试遇localhost拒绝连接问题求助

嘿，咱们来一步步排查你遇到的问题，核心其实是两个关键点导致了当前的错误：

问题1：本地文件直接打开的协议与redirect_uri不匹配 #

你现在应该是直接双击打开index.html文件吧？这时候浏览器用的是file:///C:/fitbit_javascript/index.html这种本地文件协议，但你在Fitbit授权链接里设置的redirect_uri是http://localhost/fitbit_javascript/——这个地址指向的是本地HTTP服务器的路径，而你根本没启动任何本地服务器，所以浏览器自然会提示localhost refused to connect。

问题2：App.js代码执行时机不对，没做授权判断 #

当你第一次打开页面时，还没经过Fitbit授权，URL里根本没有#access_token=xxx这种授权后的片段，这时候执行url.split("#")[1]会得到undefined，再调用.split("=")直接就会抛出错误，后面获取心率数据的代码根本跑不起来。

具体解决方案 #

步骤1：启动本地HTTP服务器 #

Windows 10下有两种简单的方式启动本地服务器，选一个你方便的：

• Python（推荐，如果你装了Python）：打开命令提示符，切换到C:\fitbit_javascript文件夹，执行对应命令：

  # 如果你用Python 3
  python -m http.server 80
  # 如果你用Python 2
  python -m SimpleHTTPServer 80
  

  执行后，本地服务器就会在80端口启动，你可以用浏览器访问http://localhost/fitbit_javascript/打开你的页面了。
• Node.js的http-server：如果电脑装了Node.js，先全局安装工具：

  npm install -g http-server
  

  同样切换到目标文件夹，执行：

  http-server -p 80
  

步骤2：验证Fitbit开发者后台的redirect_uri #

登录Fitbit开发者后台，找到你的应用，确认redirect_uri和你授权链接里的一模一样：http://localhost/fitbit_javascript/，如果之前设置的不对，赶紧改过来。

步骤3：修改App.js代码，加判断和错误处理 #

把你的app.js改成下面这样，先判断是否有授权信息，再执行后续逻辑，避免报错：

// 用URLSearchParams更安全地解析哈希片段里的授权参数
const urlHashParams = new URLSearchParams(window.location.hash.slice(1));
const access_token = urlHashParams.get('access_token');
const userId = urlHashParams.get('user_id');

// 先检查是否拿到了授权信息
if (access_token && userId) {
    console.log('Access Token:', access_token);
    console.log('User ID:', userId);

    // 请求心率数据
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `https://api.fitbit.com/1/user/${userId}/activities/heart/date/today/1w.json`);
    xhr.setRequestHeader("Authorization", `Bearer ${access_token}`);
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 解析成JSON格式，控制台查看更清晰
            console.log('心率数据:', JSON.parse(xhr.responseText));
        } else {
            console.error('请求失败，状态码:', xhr.status, '响应内容:', xhr.responseText);
        }
    };
    
    // 处理网络请求错误
    xhr.onerror = function() {
        console.error('网络请求出错，请检查网络连接');
    };
    
    xhr.send();
} else {
    console.log('还没授权呢，点击页面上的登录链接去授权吧～');
}

步骤4：测试整个流程 #

1. 启动本地服务器后，打开浏览器访问http://localhost/fitbit_javascript/index.html
2. 点击"Login to Fitbit"链接，跟着提示完成Fitbit账号授权
3. 授权成功后，浏览器会跳回本地服务器的页面，这时候打开开发者工具的控制台，就能看到打印的token、用户ID，还有Fitbit返回的心率数据啦！

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