Cordova应用点击按钮调用本地后端接口无响应问题排查求助

一、Cordova 配置类问题 #

• 白名单配置缺失：Cordova默认限制跨域请求，需要先安装cordova-plugin-whitelist插件，再在项目config.xml中添加如下配置：

<!-- 测试环境使用，生产环境建议收紧访问范围 -->
<allow-navigation href="http://*/*" />
<allow-intent href="http://*/*" />

同时需要在index.html的head标签中添加内容安全策略配置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://localhost:6969 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

• localhost指向错误：如果应用运行在真机/模拟器上，localhost代表当前设备而非运行后端服务的电脑。需要保证设备和电脑连接同一局域网，将请求地址中的localhost替换为电脑的局域网IP（例：http://192.168.3.45:6969/test）。
• 安卓明文请求限制：安卓9及以上系统默认禁止HTTP明文请求，要么将后端服务改为HTTPS协议，要么在config.xml的安卓平台配置段添加明文访问权限：

<platform name="android">
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>
</platform>

二、前端代码问题 #

• 表单默认提交行为冲突：你的按钮放在form标签内，默认类型为submit，点击后会触发表单提交刷新页面，直接中断未完成的请求。两种修改方案可选：
  方案1：给button指定type属性：

  <button type="button" onclick="submitButton()">Submit Function</button>
  

  方案2：在submitButton函数中阻止默认事件：

  function submitButton(e) {
    e.preventDefault();
    // 原有请求逻辑
  }
  

• 缺少错误捕获逻辑：当前fetch仅编写了成功回调，没有错误捕获逻辑，无法定位具体请求报错。补充catch逻辑便于排查问题：

function submitButton() {
  const url ='http://替换为你的电脑IP:6969/test';
  const headers = {
    "Content-Type": "application/json",
  }
  fetch(url, { method: 'POST', headers: headers})
  .then((res) => {
     return res.json()
  })
  .catch(err => {
    console.error('请求报错：', err)
    alert(JSON.stringify(err))
  })
}

三、服务端代码问题 #

当前后端接口收到请求后没有返回任何响应，fetch会一直等待响应直到超时，可能导致请求异常。修改服务端代码补充返回逻辑：

app.post('/test', (req, res) => {
    console.log("this is actually pretty cool, if it worked!")
    // 新增响应返回
    res.json({status: 'success'})
})

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