React开发iOS应用在Xcode模拟器运行时Axios请求阻塞问题求助

• 打开项目ios目录下的.xcworkspace文件（不要打开.xcodeproj格式文件）
• 在顶部设备选择栏选中对应的模拟器/真机设备，点击运行按钮启动应用
• 切换到底部面板的「Debug Console」标签，即可查看iOS原生层输出的所有运行日志，包括网络请求被拦截的具体错误码和原因

1. ATS网络安全限制拦截 #

iOS自带的App Transport Security规则对服务端加密配置要求远高于安卓和浏览器，哪怕SSL证书显示正常，也可能因为不符合规则被拦截：

• 临时验证方案：在项目Info.plist中添加如下配置，临时关闭ATS测试请求是否正常：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

如果配置后请求可正常发送，说明服务端TLS版本低于1.2、加密套件不在iOS支持列表内，调整服务端加密配置后可移除临时豁免规则。

2. 跨域响应头格式不兼容 #

iOS对响应头的校验规则更严格，两种常见异常场景：

• 响应头同时存在Access-Control-Allow-Origin: "*"和Access-Control-Allow-Credentials: true，iOS会直接拒绝请求，两者无法同时生效
• 响应头存在非ASCII字符、格式错误的换行/空格，会导致iOS解析失败
• 可执行以下命令打印完整响应头排查问题：
  curl -I https://example.com/wp-json/survey/v1/listOfQuestions

3. Axios缺少异常捕获配置 #

你可以补充超时配置和错误捕获逻辑，拿到更明确的报错信息：

const sendGetRequest = () => {
  return axios({
    url: "https://example.com/wp-json/survey/v1/listOfQuestions",
    method: 'get',
    timeout: 10000
  }).then(response => {
    // 原有业务逻辑保持不变
    var answerQuestionsFirstTimeCounting = [];
    for (let index = 1; index <= response.data.length; index++) {
      if(response.data[index] != undefined) {
        var categoryName =response.data[index].category.toLowerCase();
        var search = ' ';
        var replaceWith = '_';
        categoryName = categoryName.split(search).join(replaceWith);
        if(!questionsCategories.includes(categoryName)) {
          questionsCategories.push(categoryName);
        }
      }
      answerQuestionsFirstTimeCounting[index] = 0; 
    }
    nrQuestions = response.data.length;
    return response.data;
  }).catch(err => {
    console.log('请求错误详情', err, err.response?.status, err.response?.data)
  })
};

打印的错误内容可以直接在Xcode的Debug Console中查看。

4. Ionic域名白名单未配置 #

检查项目根目录下的config.xml，是否添加了目标域名的访问权限，iOS默认会拦截未在白名单内的域名请求：

<allow-navigation href="https://example.com/*" />
<allow-intent href="https://example.com/*" />

如果没有对应配置，添加后重新打包运行即可。

内容的提问来源于stack exchange，提问作者Constantin Uncuță