React Native中使用Axios如何禁用SSL证书验证

重要提醒：禁用SSL证书验证会跳过HTTPS证书合法性校验，存在中间人攻击、数据泄露等重大安全风险，以下所有配置仅可用于本地开发、内网测试环境，生产环境严禁开启，否则可能引发安全事故、导致应用上架审核被拒。

安卓端配置方案 #

• 原生配置修改（适配React Native 0.60及以上版本，无需引入第三方依赖）
  1. 进入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" />
      </trust-anchors>
    </base-config>
  </network-security-config>
  

  2. 打开同目录下的AndroidManifest.xml文件，在<application>标签上添加属性android:networkSecurityConfig="@xml/network_security_config"，重新打包安卓应用即可信任用户安装的自签名证书；如果需要完全跳过所有证书校验，可以在上述xml的trust-anchors节点下添加自定义证书信任规则，或直接修改原生OkHttp客户端的SSL校验逻辑。
• 适配器替换方案
  如果不想改动原生代码，可以使用支持自定义SSL校验的原生网络库替换Axios默认的XMLHttpRequest适配器，初始化请求实例时开启允许所有证书的配置，即可跳过所有SSL证书校验流程。

iOS端配置方案 #

• ATS配置修改
  打开iOS项目下的Info.plist文件，添加App Transport Security相关配置，放开网络加载限制：

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

• 原生请求逻辑修改
  找到iOS原生代码中的RCTHTTPRequestHandler.mm文件，找到URLSession:didReceiveChallenge:completionHandler:代理方法，在方法开头添加证书信任逻辑，直接放行所有服务端证书：

  if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
    NSURLCredential *credential = [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust];
    completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
    return;
  }
  

  修改完成后重新执行pod install安装依赖，重新运行iOS项目即可生效。

额外排查点 #

出现[AxiosError: Network Error]报错并不一定是SSL证书校验导致的，配置前先排查以下常见问题：

• 确认请求的接口地址、端口填写正确，设备和服务端网络连通正常
• 安卓端确认已经开启cleartextTrafficPermitted配置，允许HTTP明文请求（如果接口是HTTP协议）
• 确认服务端已经配置了正确的跨域头，没有拦截来自应用的请求
• 如果是用模拟器调试，确认模拟器没有开启网络代理、VPN等工具拦截请求

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