Expo React Native调用HTTPS接口出现Network request failed问题求助

问题背景 #

• 后端：仅支持HTTPS自签名证书的Spring Boot服务
• 前端：Expo 开发的React Native应用
• 现象：前端fetch请求抛出「Network request failed」错误，Postman可正常调用接口；已尝试更新自签名证书、切换IPv4地址，问题未解决

报错栈 #

Network request failed
at node_modules\whatwg-fetch\dist\fetch.umd.js:null in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue

相关配置与代码 #

package.json 脚本

"scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },

前端请求代码

login = () => {
        const data = { email: email, password: password};
        const options = {
            method: 'POST',
        };
        console.log(data);
        fetch(`https://192.xxxx:8443/login?email=${encodeURIComponent(data.email)}&password=${encodeURIComponent(data.password)}`, )
        .then((reponse) => reponse.json())
        .then(responseJson => {
            console.log(responseJson);
            
        })
        .catch((error) => console.log(error));
    };

排查与解决步骤 #

1. 修复请求代码的参数传递错误 #

你的代码中定义了options配置（指定POST方法），但未传入fetch函数，导致请求默认使用GET方法。如果后端login接口仅接受POST请求，会直接返回405错误，触发前端的「Network request failed」提示。

修正后的代码：

login = () => {
    const data = { email: email, password: password};
    const options = {
        method: 'POST',
        // 若后端要求JSON格式body，可添加以下配置（根据实际接口要求调整）
        // headers: {
        //     'Content-Type': 'application/json',
        // },
        // body: JSON.stringify(data),
    };
    console.log(data);
    // 注意传入options参数
    fetch(`https://192.xxxx:8443/login?email=${encodeURIComponent(data.email)}&password=${encodeURIComponent(data.password)}`, options)
    .then((response) => response.json())
    .then(responseJson => {
        console.log(responseJson);
    })
    .catch((error) => console.log(error));
};

2. 解决自签名证书信任问题 #

React Native 默认不信任自签名证书，Postman可手动信任所以能正常调用，而移动端必须显式配置信任该证书。

证书适配要求

• 确保自签名证书的**Common Name(CN)或Subject Alternative Name(SAN)**包含后端的IP地址（即你使用的192.xxxx），否则SSL验证会因为域名/IP不匹配失败。
• 证书格式需为PEM（.crt或.pem），且包含完整证书链。

Expo 项目配置

Android 端

使用expo-build-properties插件配置网络安全规则：

1. 安装插件：expo install expo-build-properties
2. 在app.json中添加配置：

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "networkSecurityConfig": "./network_security_config.xml"
          }
        }
      ]
    ]
  }
}

3. 项目根目录创建network_security_config.xml：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="false">
        <domain includeSubdomains="true">192.xxxx</domain>
        <trust-anchors>
            <certificates src="@raw/your_cert" />
        </trust-anchors>
    </domain-config>
</network-security-config>

4. 将你的自签名证书（如server.crt）放入android/app/src/main/res/raw目录（若使用bare workflow；managed workflow需结合expo-asset加载证书）。

iOS 端

在app.json中配置ATS例外，信任目标IP：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSExceptionDomains": {
            "192.xxxx": {
              "NSIncludesSubdomains": true,
              "NSExceptionAllowsInsecureHTTPLoads": false,
              "NSExceptionMinimumTLSVersion": "TLSv1.2"
            }
          }
        }
      }
    }
  }
}

同时将自签名证书导入iOS项目（managed workflow建议使用自定义开发客户端加载）。

3. 适配Expo开发环境限制 #

如果使用Expo Go测试，由于其默认不支持自签名证书，建议切换到自定义开发客户端：

1. 安装expo-dev-client：expo install expo-dev-client
2. 构建自定义开发客户端：eas build --profile development --platform android/ios
3. 使用构建后的客户端测试接口，可正常信任自签名证书。

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