Ionic React中Axios/fetch请求失败（CURL正常）问题排查

问题背景 #

使用CURL发起GET请求可正常获取结果：

curl -X 'GET' \
  'https://www.website.com/filehandlingverifiedsession?seskey=0000000005711040000202405141237080003968400278187&id=94520' \
  -H 'accept: */*' \
  -H 'Content-Type: text/plain'

但iOS端Ionic React应用中，使用Axios或fetch调用相同参数的URL时出现报错，Axios请求代码如下：

const handleDownload = (documentID: string) => {
        console.log('ƒ handleDownload mxapp axios', documentID);
        var url = 'https://www.website.com/filehandlingverifiedsession'; //?seskey='+store.userSessionKey+'&id='+documentID;
        console.log('url', url);
        axios.get(url, {
            params: {
                seskey: store.userSessionKey,
                id: documentID,
            }
        })
        .then(function (response) {
            console.log('success');
            console.log(response);
        })
        .catch(function (error) {
            if (error.response) {
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            } else if (error.request) {
                console.log(error.request);
            } else {
                console.log('Error', error.message);
            }
            console.log(error.config);
        })
        .finally(function () {
            console.log('always');
        });
        return;
    }

可能原因与解决方法 #

1. iOS ATS（App Transport Security）限制 #

iOS默认强制HTTPS请求符合安全标准（如TLS 1.2+、完整证书链），而CURL会忽略部分不安全配置，导致应用内请求被拦截。

• 解决：
  • 验证服务器TLS配置，确保使用TLS 1.2及以上版本，证书链完整无缺失。
  • 测试环境可临时在Info.plist中添加ATS例外（正式环境不推荐）：

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <!-- 或针对特定域名配置 -->
        <key>NSExceptionDomains</key>
        <dict>
            <key>website.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSAllowsArbitraryLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    

2. 参数编码不一致 #

Axios会自动对params中的参数进行URL编码，若服务器不接受编码后的参数（或编码规则与CURL不一致），会导致请求失败。

• 解决：
  • 直接拼接参数到URL中，与CURL请求完全一致，跳过Axios的自动编码：

    var url = `https://www.website.com/filehandlingverifiedsession?seskey=${store.userSessionKey}&id=${documentID}`;
    axios.get(url)
    

  • 若需保留params，自定义参数序列化规则，确保与CURL行为一致：

    axios.get(url, {
        params: { seskey: store.userSessionKey, id: documentID },
        paramsSerializer: (params) => {
            // 手动拼接参数，不编码特殊字符（根据服务器要求调整）
            return Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
        }
    })
    

3. 请求头与CURL不一致 #

Axios默认请求头与CURL存在差异，服务器可能对请求头有严格校验。

• 解决：
  手动设置请求头，完全匹配CURL的配置：

  axios.get(url, {
      params: { seskey: store.userSessionKey, id: documentID },
      headers: {
          'accept': '*/*',
          'Content-Type': 'text/plain'
      }
  })
  

4. 会话/Cookie缺失 #

CURL可能依赖终端中保存的会话Cookie，而Ionic应用是独立会话，缺少验证所需的Cookie或会话信息。

• 解决：
  • 用curl -v查看CURL请求的Cookie头，在Axios中手动添加：

    headers: {
        'Cookie': 'xxx=xxx; yyy=yyy' // 替换为CURL中的Cookie内容
    }
    

  • 确认store.userSessionKey与CURL中使用的seskey完全一致，无拼写、大小写或截断问题。

5. 网络权限或插件问题 #

Ionic/Cordova的网络插件配置错误，或iOS应用未获取网络权限。

• 解决：
  • 检查Info.plist中是否添加了网络权限，确保应用可访问网络。
  • 尝试用原生fetch代替Axios，排查是否为Axios本身的问题：

    fetch(`https://www.website.com/filehandlingverifiedsession?seskey=${store.userSessionKey}&id=${documentID}`, {
        method: 'GET',
        headers: {
            'accept': '*/*',
            'Content-Type': 'text/plain'
        }
    })
    .then(res => res.text())
    .then(console.log)
    .catch(console.error);
    

关键排查步骤 #

优先查看Xcode日志中的具体错误类型：

• 若为error.request：说明请求已发出但无响应，大概率是网络连接或ATS问题。
• 若为error.response：根据状态码判断（如401/403为权限验证失败，500为服务器内部错误），针对性排查参数、会话信息。

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