Buildfire插件Android正常运行但iOS端登录失败问题排查求助

问题背景 #

基于JavaScript/HTML/CSS在Buildfire平台开发的独立模式插件，采用OAuth对接厂商API实现登录，在Android设备和Windows测试环境下完全正常，但使用同一有效凭证在iOS设备登录时立即报错。以下结合代码给出具体排查方向：

1. 请求Content-Type与请求体格式不匹配（核心嫌疑） #

OAuth的token接口通常要求请求体为application/x-www-form-urlencoded格式，但当前代码中设置的Content-Type为text/plain：

headers: {
    'Content-Type': 'text/plain'
},
body: 'grant_type=cloud_contact&username=' + user.value + '&password=' + pw.value

iOS的WebView对HTTP请求的格式校验比Android更严格，厂商API可能在iOS环境下拒绝识别text/plain类型的表单参数，直接返回登录失败。

排查/修复：

• 将Content-Type改为application/x-www-form-urlencoded
• 推荐使用URLSearchParams构造请求体，自动处理编码问题：

  const formData = new URLSearchParams();
  formData.append('grant_type', 'cloud_contact');
  formData.append('username', user.value);
  formData.append('password', pw.value);
  
  fetch('https://example.cloud.com/oauth/token', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: formData
  })
  

2. 表单默认提交行为干扰异步登录请求 #

HTML中的表单设置了action="setToken()"，且登录按钮为type="submit"，点击后会触发浏览器默认的表单提交行为（页面刷新），这会中断正在进行的fetch登录请求。iOS的WebView在默认提交与自定义异步请求的时序处理上和Android存在差异，导致请求直接终止。

排查/修复：

• 阻止表单默认提交：在setToken函数开头添加event.preventDefault()
• 或者将按钮类型改为button，移除表单的action属性：

  <button class="btn btn-primary" type="button" onclick="setToken()">Login</button>
  

3. 自定义console.log导致调试日志丢失 #

代码中重写了原生console.log，但内部又递归调用了console.log(data)，会导致无限循环或日志输出异常，无法在iOS设备上看到真实的错误信息（比如fetch的具体错误、API响应内容）。

排查/修复：

• 删除自定义的console.log函数，改用原生日志输出，或换个函数名（比如customLog）来实现页面日志展示：

  function customLog(data) {
      let logBox = document.getElementById("logBox");
      if (logBox) {
          logBox.innerHTML += 'Log: ' + data + '. ';
      }
      console.log(data);
  }
  

4. iOS WebView跨域与隐私限制差异 #

iOS的WKWebView对跨域请求有更严格的隐私限制，比如：

• 第三方Cookie是否被阻止（厂商API可能依赖Cookie维持会话）
• CORS响应头是否包含iOS允许的字段（比如Access-Control-Allow-Credentials）
• Buildfire平台的iOS插件是否配置了正确的跨域白名单

排查/修复：

• 使用Safari调试iOS设备，查看网络请求的响应头和错误详情（比如是否有CORS报错）
• 检查厂商API是否返回了Access-Control-Allow-Origin: *或具体的域名，以及Access-Control-Allow-Credentials: true（如果需要携带Cookie）
• 在Buildfire插件配置中确认iOS端的跨域权限设置

5. Buildfire异步存储的时序问题 #

buildfire.userData.save是异步操作，但当前代码中在调用它之后立即执行navHome()：

buildfire.userData.save({ token }, "myToken", (err, result) => {
    if (err) console.log("error in setToken(): " + err);
});
header.innerHTML = "Login successful";
console.log('login successful and token saved successfully');
// 立即跳转
.then(noObject => {
    navHome();
})

在iOS上，异步存储的速度可能比Android慢，导致跳转后loggedIn函数获取不到刚保存的token，触发登录失败逻辑。

排查/修复：

• 将navHome()移到buildfire.userData.save的成功回调中，确保存储完成后再跳转：

  buildfire.userData.save({ token }, "myToken", (err, result) => {
      if (err) {
          console.log("error in setToken(): " + err);
      } else {
          header.innerHTML = "Login successful";
          console.log('login successful and token saved successfully');
          navHome();
      }
  });
  

6. 凭证参数未编码导致解析失败 #

如果用户名/密码包含特殊字符（比如&、=、空格等），直接拼接请求体时会破坏参数结构，厂商API无法正确解析凭证。iOS的WebView对未编码字符的处理和Android存在差异，可能导致参数丢失或错误。

排查/修复：

• 使用encodeURIComponent对用户名和密码进行编码：

  const bodyText = `grant_type=cloud_contact&username=${encodeURIComponent(user.value)}&password=${encodeURIComponent(pw.value)}`;
  

• 更推荐使用前面提到的URLSearchParams，它会自动处理所有字符编码。

调试建议 #

使用Safari连接iOS设备，打开Web Inspector查看：

• 登录请求的实际发送内容（是否参数正确、Content-Type是否正确）
• API返回的具体响应（是4xx错误、5xx错误还是其他）
• 控制台的真实错误信息（避免自定义log的干扰）

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