如何在React Native中实现MTLS？使用Cloudflare保护API遇困境

我之前在项目里做过类似的实现，React Native本身确实没有官方的MTLS直接支持，但通过原生扩展或第三方库完全可以搞定，结合Cloudflare的配置步骤如下：

核心实现路径 #

1. 原生层自定义网络请求模块 #

React Native的JS层fetch无法直接处理客户端证书，所以需要在iOS和Android各自实现支持MTLS的网络请求逻辑，再桥接给JS调用：

• iOS端：使用URLSession，创建包含客户端证书的URLCredential，配置到URLSessionConfiguration中。把.p12格式的证书放到项目资源里，通过SecPKCS12Import解析证书，生成信任链后发起请求。
• Android端：基于OkHttpClient，通过SSLContext加载.pem格式的客户端证书和私钥，自定义SSLSocketFactory和X509TrustManager，替换默认的客户端配置，然后封装成供JS调用的模块。

2. 借助第三方库简化开发 #

不用自己写原生代码的话，可以用支持MTLS的第三方网络库，比如react-native-ssl-pinning或者react-native-blob-util，这些库已经封装了原生的MTLS逻辑：

import { fetch } from 'react-native-ssl-pinning';

// 发起带MTLS的请求
const fetchWithMTLS = async () => {
  try {
    const response = await fetch('https://your-cloudflare-api-domain.com/api/endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ data: 'test' }),
      sslPinning: {
        certs: ['client-cert'], // 放在原生资源目录的证书文件名（不带后缀）
        passphrase: 'your-cert-passphrase', // 证书密码（如果有的话）
      },
    });
    const result = await response.json();
    console.log(result);
  } catch (err) {
    console.error('MTLS请求失败:', err);
  }
};

Cloudflare 侧的关键配置 #

• 确保在Cloudflare的「SSL/TLS」→「客户端证书」页面开启MTLS规则，上传你的客户端证书公钥；
• 配置API路由的MTLS验证规则，指定只有携带有效客户端证书的请求才能通过；
• 注意证书有效期，提前更新避免服务中断。

踩坑提示 #

• 证书格式要对应平台：iOS推荐.p12（包含证书和私钥），Android可以用.pem + .key的分离格式；
• iOS需要在Info.plist中添加NSAppTransportSecurity配置，允许对应域名的HTTPS请求；
• Android要把证书放到res/raw目录，并且在代码中正确加载文件路径。

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