React Native（Android）使用Axios遇Network Error问题求助

你的问题根源是Android设备的SSL证书信任链不完整：Azure WAF启用后，API使用的证书可能包含Android系统默认信任链未覆盖的中间证书，导致Axios的HTTP客户端无法完成证书验证，进而抛出Network Error；而iOS系统的默认信任链更全面，所以没有问题。以下是安全合规的解决办法：

1. 导出Azure API的完整证书链 #

首先需要获取API域名的完整SSL证书链（包含根证书和所有中间证书）：

• 浏览器导出：访问API域名，点击地址栏锁图标 → 「证书」→ 「详细信息」→ 「复制到文件」，选择Base64编码的X.509(.CER)格式，依次导出根证书和所有中间证书，合并为一个.pem文件。
• 命令行导出：执行以下OpenSSL命令，复制输出中所有-----BEGIN CERTIFICATE-----到-----END CERTIFICATE-----的内容，保存为azure_api_certs.pem：

  openssl s_client -connect your-api-domain:443 -showcerts
  

2. 将证书集成到Android项目并配置信任链 #

步骤1：放置证书文件 #

在Android项目的app/src/main/res目录下新建raw文件夹（若不存在），将导出的azure_api_certs.pem放入该目录。

步骤2：自定义OkHttpClient信任证书 #

React Native默认使用OkHttpClient处理网络请求，我们可以通过自定义工厂类让它信任我们的证书：
在MainApplication.java中添加以下代码：

import com.facebook.react.modules.network.OkHttpClientFactory;
import com.facebook.react.modules.network.OkHttpClientProvider;
import okhttp3.OkHttpClient;
import okhttp3.CertificatePinner;
import java.io.InputStream;
import java.security.cert.CertificateFactory;
import java.security.cert.X509Certificate;

public class CustomOkHttpClientFactory implements OkHttpClientFactory {
    @Override
    public OkHttpClient createNewNetworkModuleClient() {
        try {
            // 加载raw目录下的证书文件
            InputStream certInputStream = MainApplication.this.getResources().openRawResource(R.raw.azure_api_certs);
            CertificateFactory certFactory = CertificateFactory.getInstance("X.509");
            X509Certificate apiCert = (X509Certificate) certFactory.generateCertificate(certInputStream);

            // 配置证书固定，只信任该API的证书
            CertificatePinner certPinner = new CertificatePinner.Builder()
                    .add("your-api-domain.com", "sha256/" + getCertificateFingerprint(apiCert))
                    .build();

            return new OkHttpClient.Builder()
                    .certificatePinner(certPinner)
                    .build();
        } catch (Exception e) {
            throw new RuntimeException("Failed to configure custom OkHttpClient", e);
        }
    }

    // 辅助方法：获取证书SHA-256指纹
    private String getCertificateFingerprint(X509Certificate cert) throws Exception {
        java.security.MessageDigest md = java.security.MessageDigest.getInstance("SHA-256");
        byte[] digest = md.digest(cert.getEncoded());
        StringBuilder sb = new StringBuilder();
        for (byte b : digest) {
            sb.append(String.format("%02x", b));
        }
        return sb.toString();
    }
}

然后在MainApplication的onCreate方法中注册这个工厂类：

@Override
public void onCreate() {
    super.onCreate();
    OkHttpClientProvider.setOkHttpClientFactory(new CustomOkHttpClientFactory());
}

3. 检查Azure WAF的证书配置 #

登录Azure门户，确认API的SSL证书是否包含完整的证书链：

• 进入API管理/应用服务的SSL设置页面，查看上传的证书是否为包含根证书、中间证书的完整PEM文件；
• 若证书链不完整，重新上传完整的证书包，确保WAF转发请求时使用的是完整证书链。

4. 证书固定替代方案（使用React Native库） #

如果不想修改原生代码，可以使用react-native-ssl-pinning库实现证书固定：

1. 安装依赖：

   npm install react-native-ssl-pinning --save
   

2. 配置Axios使用该库的adapter：

   import axios from 'axios';
   import { SSLPinning } from 'react-native-ssl-pinning';
   
   // 创建自定义Axios客户端
   const apiClient = axios.create({
       baseURL: 'https://your-api-domain.com',
       adapter: async (config) => {
           const response = await SSLPinning.request({
               url: config.url,
               method: config.method,
               data: config.data,
               headers: config.headers,
               sslPinning: {
                   certs: ['your-cert-sha256-fingerprint'], // 替换为证书的SHA-256指纹
               },
           });
           return {
               data: response.data,
               status: response.status,
               statusText: response.statusText,
               headers: response.headers,
               config,
           };
       },
   });
   
   // 使用apiClient发起请求
   apiClient.post('/your-endpoint', { /* 请求数据 */ })
       .then(res => console.log(res))
       .catch(err => console.error(err));
   

以上方案均通过限定信任特定合法证书解决验证问题，完全避免了禁用SSL验证带来的安全风险。

内容的提问来源于stack exchange，提问作者Lucas Costa Gusmão