2018-07-06 React Native 0.55.4 遇到 TypeError Network request failed

开始调接口时在IOS平台调试接口没点毛病切到安卓这边报错 TypeError Network request failed 然后我就去抄官网代码下来到这边也是一样的错误下面是官网代码

fetch('https://mywebsite.com/mydata.json')

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

试了一下GET请求可以的，POST就有毛病了，搞了我半天后发现原来是SSL证书有毛病。百度了一下怎么修改React native 中的 OkHttpClient 要不然太复杂要不然就是不能用。

看源码看源码 React native 的万物都是从 MainReactPackage 进入里面看到一个 getNativeModules

image.png

在这里面找找应该能找到网络相关模块。果然 NetworkingModule 跟网络有关系的模块

image.png

进入 NetworkingModule 看到一个构造函数里面有个 OkHttpClientProvider 的东西从字面上命名来看应该就是我们要改的东西了

image.png

里面有个叫做 setOkHttpClientFactory的方法应该设置一个OkhttpClientFactory就可以替换了，下面代码 createClient 是判断了如果有Factory就用Factory来创建OkHttpClient

image.png

我们只需要自己造一个OkhttpClientFactory就可以了，下面贴出OkhttpClientFactory代码

import com.facebook.react.modules.network.OkHttpClientFactory;
import com.facebook.react.modules.network.ReactCookieJarContainer;

import java.io.IOException;
import java.security.SecureRandom;
import java.security.cert.X509Certificate;
import java.util.concurrent.TimeUnit;

import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSession;
import javax.net.ssl.SSLSocketFactory;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;

import okhttp3.Interceptor;
import okhttp3.OkHttpClient;
import okhttp3.Response;
import okhttp3.logging.HttpLoggingInterceptor;

/*
 * Copyright (c) 2017 xxx有限公司.
 * All Rights Reserved.
 * @Author: guojian
 * @Date: 2018/7/5 10:18
 * @Description:
 *
 * 一个允许所有证书的 OkHttpClientFactory 用于react native 请求
 * 解决 TypeError Network request failed
 */
public class AllowAllCertificatesOkHttpClientFactory implements OkHttpClientFactory {
    private OkHttpClient.Builder mOkHttpClient;

    private static final int TIMEOUT = 20;

    public AllowAllCertificatesOkHttpClientFactory() {

    }

    @Override
    public OkHttpClient createNewNetworkModuleClient() {
        //double check 双向锁
        if (mOkHttpClient == null) {
            synchronized (AllowAllCertificatesOkHttpClientFactory.class) {
                if (mOkHttpClient == null) {
                    X509TrustManager trustManager = createInsecureTrustManager();
                    SSLSocketFactory sslSocketFactory = createInsecureSslSocketFactory(trustManager);
                    mOkHttpClient = new OkHttpClient.Builder()
                            .connectTimeout(TIMEOUT, TimeUnit.SECONDS)
                            .readTimeout(TIMEOUT, TimeUnit.SECONDS)
                            .writeTimeout(TIMEOUT, TimeUnit.SECONDS)
                            .cookieJar(new ReactCookieJarContainer())
                            .sslSocketFactory(sslSocketFactory, trustManager)
                            .hostnameVerifier(createInsecureHostnameVerifier());
                }
            }
        }
        return mOkHttpClient.build();
    }

    /**
     * 打开或关闭日志
     *
     * @param isOpenLog
     */
    public void setOpenLog(boolean isOpenLog) {
        mOpenLog = isOpenLog;
    }

    private static HostnameVerifier createInsecureHostnameVerifier() {
        return new HostnameVerifier() {
            @Override
            public boolean verify(String s, SSLSession sslSession) {
                return true;
            }
        };
    }

    private static SSLSocketFactory createInsecureSslSocketFactory(TrustManager trustManager) {
        try {
            SSLContext context = SSLContext.getInstance("TLS");
            context.init(null, new TrustManager[]{trustManager}, new SecureRandom());
            return context.getSocketFactory();
        } catch (Exception e) {
            throw new AssertionError(e);
        }
    }

    /**
     * 信任所有证书
     */
    private static X509TrustManager createInsecureTrustManager() {
        return new X509TrustManager() {
            @Override
            public void checkClientTrusted(X509Certificate[] chain, String authType) {
            }

            @Override
            public void checkServerTrusted(X509Certificate[] chain, String authType) {
            }

            @Override
            public X509Certificate[] getAcceptedIssuers() {
                return new X509Certificate[0];
            }
        };
    }


}

在MainApplicationonCreate里面添加一条代码就可以使用自己的OkHttpClient了

  @Override
    public void onCreate() {
        super.onCreate();
        //设置新的定义自己的OkHttpClientFactory 允许所有证书通过
        OkHttpClientProvider.setOkHttpClientFactory(new AllowAllCertificatesOkHttpClientFactory());
        SoLoader.init(this, /* native exopackage */ false);
    }

2018-07-06 React Native 0.55.4 遇到 TypeError Network request failed

推荐阅读更多精彩内容