ReactJS中出现TypeError: callback is not a function错误求助

问题现象 #

• 调用MT5Request的Auth方法时抛出TypeError: callback is not a function
• 接口返回状态码200 OK，但响应体是HTML页面而非预期的{ret_code: 0}
• 响应关联路径显示./node_modules/stream-http/lib/response.js.exports.IncomingMessage.

当前响应体内容 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <script src="/charting_library/charting_library.min.js"></script>
        <title>Charting Library React Demo</title>
    </head>
    <body>
        
        <div id="root"></div>
    
    <script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>

相关代码 #

组件中的调用代码 #

componentDidMount() {
    // Example of use 
    var req = new MT5Request("localhost", 443); 

    // Authenticate on the server using the Auth command 
    req.Auth(111, "passwd",  1985, "WebManager",  function (error) { 
        if (error) { 
            console.log(error); 
            return; 
        } 
        
    });
}

Auth方法实现 #

///auth function
MT5Request.prototype.Auth = function (login, password, build, agent, callback) { 
  if (!login || !password || !build || !agent) 
    return; 
  var self = this; 
  self.Get("/api/auth/start?version=" + build + "&agent=" + agent + "&login=" + login + "&type=manager", function (error, res, body) { 
    var answer = self.ParseBodyJSON(error, res, body, callback); 
    if (answer) { 
      var srv_rand_answer = self.ProcessAuth(answer, password); 
      var cli_random_buf = crypto.randomBytes(16); 
      var cli_random_buf_hex = cli_random_buf.toString('hex'); 
      self.Get("/api/auth/answer?srv_rand_answer=" + srv_rand_answer + "&cli_rand=" + cli_random_buf_hex, function (error, res, body) { 
        var answer = self.ParseBodyJSON(error, res, body, callback); 
        if (answer) { 
          if (self.ProcessAuthFinal(answer, password, cli_random_buf)) 
            callback && callback(null); 
          else 
            callback && callback("invalid final auth answer"); 
        } 
      }); 
    } 
  }); 
  return (true); 
}; 

排查与修复方案 #

1. 解决响应体为HTML的问题 #

返回首页HTML说明API请求被前端路由或错误的服务地址拦截：

• 验证MT5 API服务可用性：用Postman直接请求https://localhost:443/api/auth/start?version=1985&agent=WebManager&login=111&type=manager，确认返回预期JSON而非HTML。若服务不在localhost:443，修正MT5Request的初始化地址。
• 配置前端代理：如果MT5 API部署在其他地址，在React项目的package.json中添加proxy配置，避免前端路由拦截API请求：

  "proxy": "https://your-mt5-api-server:443"
  

• 检查前端路由规则：确保没有catch-all路由（如*）将API请求指向首页组件，必要时调整路由匹配顺序。

2. 修复TypeError: callback is not a function错误 #

该错误源于参数校验和JSON解析逻辑的漏洞：

• 完善参数校验逻辑：Auth方法开头参数缺失时，主动调用callback返回错误，而非直接return：

  MT5Request.prototype.Auth = function (login, password, build, agent, callback) { 
    if (!login || !password || !build || !agent) {
      callback(new Error("Missing required authentication parameters"));
      return;
    }
    // 后续逻辑保持不变
  };
  

• 修复ParseBodyJSON方法：确保响应非JSON时调用callback传递错误，避免后续代码执行异常：

  MT5Request.prototype.ParseBodyJSON = function(error, res, body, callback) {
    if (error) {
      callback(error);
      return null;
    }
    // 检查响应内容类型
    const contentType = res.headers['content-type'] || '';
    if (!contentType.includes('application/json')) {
      callback(new Error(`Unexpected content type: ${contentType}`));
      return null;
    }
    try {
      return JSON.parse(body);
    } catch (parseErr) {
      callback(new Error(`Failed to parse JSON: ${parseErr.message}`));
      return null;
    }
  };
  

3. 其他注意事项 #

• 浏览器环境下的crypto兼容：Node.js的crypto模块在浏览器中不可用，需替换为crypto-js等浏览器兼容库，或使用window.crypto API实现随机字节生成：

  // 浏览器环境生成随机字节
  function getRandomBytes(size) {
    const array = new Uint8Array(size);
    window.crypto.getRandomValues(array);
    return array;
  }
  // 替换原crypto.randomBytes调用
  var cli_random_buf = getRandomBytes(16);
  

• HTTPS证书问题：如果MT5服务使用自签名证书，浏览器会拦截请求，需在开发环境信任证书或改用HTTP协议（若服务支持）。

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