React Native Expo项目Axios因SSL触发网络错误，开发环境如何忽略SSL？

环境信息 #

• react-native: 0.71.7
• expo: 48.0.15
• Axios: 1.4.0
• 问题：HTTPS请求触发"Network Error"，推测为SSL证书验证失败，无法修改后端，需前端实现绕过方案，降级Axios无效

解决方案 #

1. Android平台：通过Expo配置放宽SSL信任 #

使用expo-build-properties插件修改Android网络安全配置，允许信任非标准SSL证书：

• 安装插件：

npx expo install expo-build-properties

• 修改app.json/app.config.js，添加插件配置：

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

• 创建android/app/src/main/res/xml/network_security_config.xml文件（路径不存在则手动创建）：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- 全局信任系统+用户证书，允许绕过验证（仅开发用） -->
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
            <certificates src="raw" overridePins="true" />
        </trust-anchors>
    </base-config>
    <!-- 针对目标API域名单独配置（更安全，推荐） -->
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">你的API域名</domain>
        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
        </trust-anchors>
    </domain-config>
</network-security-config>

• 重新构建项目：

npx expo prebuild --platform android
npx expo run:android

2. iOS平台：修改Info.plist放宽HTTPS限制 #

iOS开发环境下，通过配置Info.plist允许加载非标准HTTPS内容：

• 修改app.json/app.config.js的ios字段：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true,
          "NSExceptionDomains": {
            "你的API域名": {
              "NSIncludesSubdomains": true,
              "NSAllowsArbitraryLoads": true
            }
          }
        }
      }
    }
  }
}

• 重新构建iOS项目：

npx expo prebuild --platform ios
npx expo run:ios

3. Axios层面配置自定义Agent（仅裸工作流适用） #

若使用Expo裸工作流，可给Axios配置自定义Agent忽略SSL验证：

• 安装依赖：

npm install react-native-ssl-pinning

• 修改Axios实例代码：

import axios from 'axios';
import { HttpsAgent } from 'react-native-ssl-pinning';

const authApi = axios.create({
  baseURL: BASE_URL,
  headers: {
    'Content-Type': 'application/json',
    Accept: '*/*'
  },
  httpsAgent: new HttpsAgent({
    rejectUnauthorized: false, // 关闭SSL证书验证
    // 如需指定信任证书，可添加cert: require('./你的证书文件.pem')
  })
});

export const signin = async (data) => await authApi.post(URL, data);

注意事项 #

• 所有绕过SSL验证的方案仅限开发环境使用，生产环境必须启用完整SSL验证，避免安全风险。
• Expo托管工作流部分原生配置无法修改，若上述方案无效需切换到裸工作流。
• 降级Axios无法解决SSL证书信任问题，核心问题在于客户端对证书的校验逻辑，与Axios版本无关。

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