React Native Expo中如何禁用HTTPS API请求的SSL证书？解决请求失败问题

警告：禁用SSL证书验证仅允许在开发测试环境使用，生产环境绝对不能这么做，会引发严重的安全风险，包括数据泄露、中间人攻击等。

一、Axios 实现方式 #

1. 基础配置 #

安装axios后，创建带SSL忽略配置的实例：

npm install axios

import axios from 'axios';
import { Platform } from 'react-native';
import https from 'https';

const insecureAxios = axios.create({
  baseURL: 'https://你的测试API地址',
  // iOS端直接禁用证书校验
  httpsAgent: Platform.OS === 'ios' ? new https.Agent({ rejectUnauthorized: false }) : undefined,
});

2. Android端额外配置 #

Expo Android 9+ 需配置网络安全规则，允许访问非安全域名：

1. 安装配置插件：

npx expo install expo-build-properties

2. 修改app.json：

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

3. 在项目根目录创建android/app/src/main/res/xml/network_security_config.xml：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">你的测试API域名</domain>
    <trust-anchors>
      <certificates src="system" />
      <certificates src="user" />
    </trust-anchors>
  </domain-config>
</network-security-config>

二、Fetch 实现方式 #

原生Fetch无直接忽略SSL的配置，可通过以下两种方式实现：

方法1：使用Expo FileSystem #

npx expo install expo-file-system

import * as FileSystem from 'expo-file-system';

const fetchInsecureData = async () => {
  try {
    const response = await FileSystem.fetchAsync(
      'https://你的测试API地址/接口',
      {
        method: 'GET',
        ignoreSslErrors: true, // 核心配置：忽略SSL错误
      }
    );
    const result = await response.json();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
};

方法2：使用rn-fetch-blob（需Expo Dev Client） #

npm install rn-fetch-blob

import RNFetchBlob from 'rn-fetch-blob';

const fetchInsecureData = async () => {
  try {
    const response = await RNFetchBlob.config({ trusty: true })
      .fetch('GET', 'https://你的测试API地址/接口');
    const result = response.json();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
};

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