带基础认证的Fetch在Postman可用但React Native JavaScript中失效

核心原因 #

Postman和.NET客户端默认会跳过无效SSL证书校验，而React Native的Android端对HTTPS证书校验严格，再加上CSRF Token的会话绑定特性，共同导致了请求失败。

分步解决方案 #

1. 处理自签名证书校验问题

HoloLens设备门户使用自签名证书，React Native的fetch会直接拒绝这类请求，可按场景选择处理方式：

Debug环境临时方案：
修改Android项目的MainApplication.java，自定义OkHttpClient忽略SSL证书校验：

// MainApplication.java
import okhttp3.OkHttpClient;
import javax.net.ssl.SSLContext;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;
import java.security.cert.CertificateException;

@Override
public void onCreate() {
  super.onCreate();
  try {
    // 构建信任所有证书的管理器
    TrustManager[] trustAllCerts = new TrustManager[]{
      new X509TrustManager() {
        @Override
        public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {}
        @Override
        public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {}
        @Override
        public java.security.cert.X509Certificate[] getAcceptedIssuers() { return new java.security.cert.X509Certificate[]{}; }
      }
    };
    SSLContext sslContext = SSLContext.getInstance("SSL");
    sslContext.init(null, trustAllCerts, new java.security.SecureRandom());
    
    // 替换React Native默认的OkHttpClient
    OkHttpClient.Builder builder = new OkHttpClient.Builder()
      .sslSocketFactory(sslContext.getSocketFactory(), (X509TrustManager)trustAllCerts[0])
      .hostnameVerifier((hostname, session) -> true);
    
    com.facebook.react.modules.network.OkHttpClientProvider.setOkHttpClient(builder.build());
  } catch (Exception e) {
    e.printStackTrace();
  }
}

生产环境合规方案：
使用react-native-certificate-pinner库，将HoloLens设备证书的哈希值添加到信任列表，仅信任该设备的证书。

2. 正确动态获取CSRF Token

不要直接复用Postman中的静态CSRF Token（会话绑定，过期即失效），需动态获取：

async function fetchHoloLensOSInfo() {
  try {
    // 第一步：请求设备门户首页，获取会话Cookie和CSRF Token
    const loginResp = await fetch("https://hololensnetworkip/", {
      method: 'GET',
      headers: {
        'Authorization': 'Basic ' + btoa('auto-你的账号:你的密码')
      }
    });
    
    // 从响应头提取CSRF Token
    const cookieStr = loginResp.headers.get('Set-Cookie');
    const csrfToken = cookieStr.match(/CSRF-Token=([^;]+)/)[1];
    
    // 第二步：携带有效CSRF Token请求API
    const apiResp = await fetch("https://hololensnetworkip/api/os/info", {
      method: 'GET',
      headers: {
        'Authorization': 'Basic ' + btoa('auto-你的账号:你的密码'),
        'Cookie': `CSRF-Token=${csrfToken}`
      }
    });
    
    const osInfo = await apiResp.json();
    console.log('HoloLens系统信息:', osInfo);
  } catch (err) {
    console.error('请求失败:', err);
  }
}

注意：账号前必须添加auto-前缀，确保脚本可以自动完成登录流程。

3. 确认基础网络配置

• 确保Android模拟器/真机与HoloLens处于同一WiFi局域网，用设备浏览器访问HoloLens的设备门户地址，确认可正常打开。
• 检查AndroidManifest.xml中INTERNET权限已正确配置，usesCleartextTraffic="true"对HTTPS请求无影响，可保留。

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